We Keep Coding

sending data from a search bar to a url

I am having trouble. So I need to get data from an api. I have a search bar and the user needs to input the search bar to look up a super hero api.
How would I get data from a search bar and put in my url all in a .click function.
var userInput;
var url;
var test;
//https://superheroapi.com/api/10215865526738981
$(document).ready(function () {
// when the user types in the data and clicks the button
$(btn1).click(function () {
// this is where the search bar is
userInput = document.getElementById('mySearch').innerHTML;
});
url = 'https://www.superheroapi.com/api.php/10215865526738981/search/batman' + userInput;
// here is where the api link in say type in batman
// and is should pop up with info about batman and
$.getJSON(url, function (data) {
var html = '';
$.each(data.results, function (i, demo) {
html += '<h2>' + demo.name + '</h2>';
//html += "<h2>" + demo.biography.alter-egos + "</h2>";
html += '<h2> Power Stats ' + demo.powerstats.combat + '</h2>';
html += '<p> Connections ' + demo.connections.relatives + '</p>';
html += '<p> appearance ' + demo.appearance.gender + '</p>';
html += '<h2> Work ' + demo.work.base + '</h2>';
html += ' Profile <img src ' + demo.image.url + '>';
});
$('#demo').html(html);
});
}
<p>
<input type="search" id="mySearch" name="mySearch">
<button id="btn1">Search</button>
<p id="demo"></p>
</p>

Here is something that works that you can use to compare with your code and make something out of it. I've used plain javascript and left comments what is going on so that you can learn from it.
There were few wrong assumptions in original question.
code was executing on page load and didn't wait for user input
url was hardcoded to start with batman + what ever user wrote
Code below is not perfect, but it is close enough to original code and it should be easy to understand. I also opted not to use jQuery, but you should be able to use it if wanted. Just replace getElementById with jQuery selectors and replace XMLHttpRequest with getJson.
I hope this helps you move ahead with your problem and that you will be able to learn something new which could help you better understand javascript. Happy coding!
var button = document.getElementById('btn1');
// when user clicks on button, we want to call function start search
button.addEventListener('click', startSearch);
function startSearch(event) {
// when we are starting the search, we want to pick up the value
// input field from user
var userInputValue = document.getElementById('mySearch').value;
// this is base API url on which we can add what user wanted
var urlBase = 'https://www.superheroapi.com/api.php/10215865526738981/search/'
// if user did not provide name in input, we want to stop executing
if (userInputValue === null || userInputValue === '') return;
// if we are still in this function, append what user typed onto urlBase
var searchUrl = urlBase + userInputValue;
// call function which actually executes the remote call
performSearch(searchUrl);
}
function performSearch(searchUrl) {
// this could be jQuery getJSON if you so prefer
// here it is vanila JS solution of how to get data via AJAX call
var requestData = new XMLHttpRequest();
// because AJAX is always async, we need to wait until file is loaded
// once it is loaded we want to call function handleResults
requestData.addEventListener('load', handleResults);
requestData.open('GET', searchUrl);
requestData.send();
}
function handleResults() {
// once we get response, because we used vanilla JS, we got response
// available in this context as "this.response", however it is type string
// we need to take that string and parse it into JSON
var responseJSON = JSON.parse(this.response);
// if there is error, we didn't find any character
if (responseJSON.error) console.log('Character not found');
else {
var html = '';
responseJSON.results.forEach(function (result) {
html += '<h2>' + result.name + '</h2>';
// html += "<h2>" + demo.biography.alter-egos + "</h2>";
html += '<h2>Power Stats ' + result.powerstats.combat + '</h2>';
html += '<p>Connections ' + result.connections.relatives + '</p>';
html += '<p>Appearance ' + result.appearance.gender + '</p>';
html += '<p>Work ' + result.work.base + '</p>';
// html += ' Profile <img src ' + result.image.url + '>';
})
// this is bad thing to do, injecting html like that into DOM
// but let's leave this lesson for later stage
// so, let's take this html and drop it onto the page
document.getElementById('demo').innerHTML = html;
}
}
<input type="search" id="mySearch" name="mySearch">
<button id="btn1">Search</button>
<div id="demo"></div>

const value = document.getElementById('mySearch').value;
And then use this value in your api url.

hyperlink alternate text replacement

At the moment i've got this code, which replaces a span class whith a hyperlink. The hyperlink includes a abbreviation and the alternate texxt for the hyperlink includes the same abbreviation. Now what i want to do is, to somehow replace the second abbreviation in the alternate text of the hyperlink. So that there isn't "click here to visit + 'name of'abbreviation" but instead an alias. So if the abbreviaton is ggl, the alias should be google. But the hyperlink shouldn't use this alias. Can sb help me? thx
(function($) {
var number = "1234567";
function linkBuilder(abbreviation) {
return "<a href='https://www.test.com/" + abbreviation + "?sitenumber=" + number + "default'>Click here to visit " + abbreviation + "</a>";
}
function linkBuilder2(abbreviation2) {
return "<a href='https://www.test.com/" + abbreviation2 + "?sitenumber=" + number + "default'>Click here to visit " + abbreviation2 + "</a>";
}
jQuery(document).ready(function() {
var fl = $(".first-link");
if (fl.length > 0) {
fl.html(linkBuilder(fl.data("abbreviation")));
}
var sl = $(".second-link");
if (sl.length > 0) {
sl.html(linkBuilder2(sl.data("abbreviation2")));
}
});
})(jQuery);

Here is a working jsfiddle:
https://jsfiddle.net/e7qdx031/1/
linkBuilder() should be re-usable, as kalsowerus mentioned.
Another thing that should be mentioned is that the following code returns a collection of elements, not just a single element.
var fl = $(".first-link");
...
var sl = $(".second-link");
The code you have provided will not function properly if there are multiple .first-link classes on the page. So instead I would iterate over each element using $.each() and run the linkBuilder() function on them individually.
As for the linkBuilder function I would modify it to accept the element object, then read the properties to retrieve alias and name. Full name is something that you seemed to indicate you need, but was not present in the code.
(function($) {
var number = "123456";
function linkBuilder($obj) {
var abbreviation = $obj.data('abbreviation');
var name = $obj.data('name');
return "<a href='https://www.test.com/" + abbreviation + "?sitenumber=" + number + "default'>Click here to visit " + name + "</a>";
}
jQuery(document).ready(function() {
$('.first-link, .second-link').each(function(index, obj){
$(obj).html(linkBuilder($(obj)));
});
});
})(jQuery);

What you probably want is something like this:
function linkBuilder(abbreviation, alias) {
return "<a href='https://www.test.com/" + abbreviation + "?sitenumber=" + number + "default'>Click here to visit " + alias + "</a>";
}
Just pass the display-name you want for your link as the second argument.

Find all Divs after being created with JQuery on click event

I'm trying to find all divs that have been created from my click event and split them into another div (.wrapAll) on a count of 3. I can't seem to get anything back when i console.log the vars length. I know this works when I do that same process on the html thats been statically typed. Below is my code and thank you fo the thoughts!
jQuery(document).ready(function($) {
// load default twitch channels
$.getJSON('https://api.twitch.tv/kraken/streams/freecodecamp?callback=?', function(data) {
//console.log(data);
});
// Bind 'Enter' to click event
$(document).bind('keypress', function(e) {
if (e.keyCode == 13) {
$('#search').trigger('click');
}
});
// manually search for games
$('#search').on("click", function() {
// clear previous results and get search term
$('#results').html('');
search = $('#searchTerm').val();
// begin API call
$.getJSON( "https://api.twitch.tv/kraken/search/streams?q=" + search + "", function(data2) {
// console.log(data2.streams.length);
data2.streams.forEach(function(entry) {
//console.log(entry._links);
var streamURL = entry.channel.url;
url = entry.preview.medium;
$('#results').append('<div class="searchResults"><img class="games" src=' + url + '/><p id="title"> Game: ' + entry.channel.game + '<br> Viewers: ' + entry.viewers +'<br> Is Mature: ' + entry.channel.mature + '<br> Status: ' + entry.channel.status + ' </p></div><hr>');
});
});
// Get 3 divs and slice into one div to style ** problem child **
var a = $('div[id^=searchResu]').find('div');
console.log(a.length);
for( var i = 0; i < a.length; i+=3 ) {
a.slice(i, i+3).wrapAll('<div class="slide"></div>');
}
});
});

Check out this plunker here. I believe this does what your looking for.
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery#2.1.4" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="https://cdn.jsdelivr.net/lodash/4.13.1/lodash.min.js"></script>
<script>
jQuery(document).ready(function($) {
function appendHtmlContent(resultHtmlContent) {
resultHtmlContent = '<div class="slide">' + resultHtmlContent + '</div>';
$('#results').append(resultHtmlContent);
}
function processSvcResponse(data2) {
var count = 0,
searchResultContents = '',
$div = $("<div>", { class: "searchResults"});
data2.streams.forEach(function(entry) {
var streamURL = entry.channel.url;
url = entry.preview.medium;
searchResultContents += '<div class="searchResults"><a href="' + streamURL
+ '" target="_blank"><img class="games" src=' + url + '/><p id="title"> Game: ' + entry.channel.game
+ '<br> Viewers: ' + entry.viewers + '<br> Is Mature: ' + entry.channel.mature
+ '<br> Status: ' + entry.channel.status + ' </p></a></div><hr>';
count++;
if(count === 3) {
appendHtmlContent(searchResultContents);
searchResultContents = '';
count = 0;
}
});
// more results that have not been appended?
if(searchResultContents) {
appendHtmlContent(searchResultContents);
}
}
// load default twitch channels
$.getJSON('https://api.twitch.tv/kraken/streams/freecodecamp?callback=?', function(data) {});
// Bind 'Enter' to click event
$(document).bind('keypress', function(e) {
if (e.keyCode == 13) {
$('#search').trigger('click');
}
});
// manually search for games
$('#search').on("click", function() {
// clear previous results and get search term
$('#results').html('');
search = $('#searchTerm').val();
// begin API call
$.getJSON("https://api.twitch.tv/kraken/search/streams?q=" + search, processSvcResponse);
});
});
</script>
</head>
<body>
<input id="searchTerm" type="text" />
<button id="search" type="button">Search</button>
<div id="results"></div>
</body>
</html>
If I understand correctly you are wanting to iterate over the results and for every third one wrap it inside a div with class "slider". As mentioned in the comments by #charlietfl in order to query newly created DOM elements using jQuery you have to query them after they are created. In the call to jQuery.getJSON the second argument accepts a callback function. The signature is jQuery.getJSON(url, someCallbackFunction). In order to make your code a bit more readable I moved "function(data2)" up and named it processSvcResponse. Inside processSvcResponse I build up an HTML string from the results and track how many results are processed by using a counter variable. Once the counter reaches 3 I append the contents to the results div and reset the counter. This solution does not "find" the divs and slice/wrapAll as you were intending to do originally, however, I believe this still accomplishes your goal.

As #charlietfl said, you'll need to place the code that wraps your divs in the callback for getJSON. Your click event listener would look something like this then:
$('#search').on("click", function() {
// clear previous results and get search term
$('#results').html('');
search = $('#searchTerm').val();
// begin API call
$.getJSON( "https://api.twitch.tv/kraken/search/streams?q=" + search + "", function(data2) {
// console.log(data2.streams.length);
data2.streams.forEach(function(entry) {
//console.log(entry._links);
var streamURL = entry.channel.url;
url = entry.preview.medium;
$('#results').append('<div class="searchResults"><img class="games" src=' + url + '/><p id="title"> Game: ' + entry.channel.game + '<br> Viewers: ' + entry.viewers +'<br> Is Mature: ' + entry.channel.mature + '<br> Status: ' + entry.channel.status + ' </p></div><hr>');
});
// Get 3 divs and slice into one div to style ** problem child **
var a = $('div[id^=searchResu]').find('div');
console.log(a.length);
for( var i = 0; i < a.length; i+=3 ) {
a.slice(i, i+3).wrapAll('<div class="slide"></div>');
}
});
});

Modifying rangeMessage on wm.Number editor widget

I have a WaveMaker 6.7 app where I need to change the dojo ToolTip object for the rangeMessage property. For example, the javascript below changes the 'rangeMessage' property of a wavemaker number editor widget:
var page = wm.getPage('Main');
page["flowStdEditor"].setValue('rangeMessage','New Range Message Text');
alert(page["flowStdEditor"].rangeMessage); // Shows 'New Range Message Text' set above
On data entry where I enter a number that is out of range, I still receive the old 'rangeMessage' from when the app first started up in the clients web browser. Any ideas on how to change the 'rangeMessage' property on a number editor widget dynamically?? or after changing the 'rangeMessage' property, how do I refresh the dojo ToolTip object so it picks up the latest text??
Thx!!

Got it working, although it's not completely clean...
using inspect in the web browser I found the dijit ID for the 'flowStdEditor' wavemaker object. I did this by entering a value out of range, right-clicking the tooltip and selecting 'inspect element'. It showed me the HTML for the tooltip:
<input aria-invalid="false" style="height: 20px; line-height: 20px;" value="" aria-required="true" aria-disabled="false" aria-valuemax="99.99" aria-valuemin="14.16" tabindex="0" id="dijit_form_NumberTextBox_14" aria-valuenow="88888888888" class="dijitReset dijitInputInner" dojoattachpoint="textbox,focusNode" autocomplete="off" type="text">
I used id id="dijit_form_NumberTextBox_14" in the html to do the following:
var flowStdNumBox = dijit.byId("dijit_form_NumberTextBox_14");
alert('flowStdNumBox ' + flowStdNumBox.get("rangeMessage")); // Shows old message
flowStdNumBox.set("rangeMessage",'New Range Message Text');
alert('flowStdNumBox ' + flowStdNumBox.get("rangeMessage")); //Shows new message
Everything looks OK and when I enter a number that is out of ranged in the number editor widget, it now shows the new message 'New Range Message Text'.
What I don't like is hard coding the 'dijit_form_NumberTextBox_14' in my app. Does anyone know a way of retrieving the dijit.id for a WaveMaker wm.number editor widget?? (Updated!! See below)
This will retrieve what I need to make the tooltip change programmatically. It will grab 'dijit_form_NumberTextBox_14' in the example sited above.
var tmp = page[componentName].domNode.childNodes.item(1).attributes.getNamedItem('widgetid');
Here is some code that loops through all the wavemaker page components looking for 'rangeMessage' and 'invalidMessage' properties:
try {
var page = wm.getPage('Main').components;
for(var componentName in page) {
if (typeof page[componentName].domNode != 'undefined') {
if (page[componentName].domNode.childNodes.length >= 2) {
var tmp = page[componentName].domNode.childNodes.item(1).attributes.getNamedItem('widgetid');
if (tmp !== null) {
var id = tmp.value;
var dojoObj = dijit.byId(id);
var rngMsg = dojoObj.get("rangeMessage");
var invalidMsg = dojoObj.get("invalidMessage");
if (typeof rngMsg != 'undefined') {
var compRange = compRngMsg(componentName); // Lookup to see if component has a special range message to use
if (compRange !== null) {
dojoObj.set("rangeMessage",compRange); // Overrides generic rangeMessage set by langTxtRangeMsgVariable
page[componentName].rangeMessage = compRange;
if (debugging) { console.log('Overriding generic rangMessage for ' + componentName + ' to "' + compRange + '"'); }
} else {
dojoObj.set("rangeMessage",app.langTxtRangeMsgVariable.getValue("dataValue"));
page[componentName].rangeMessage = app.langTxtRangeMsgVariable.getValue("dataValue");
if (debugging) { console.log('Setting generic rangMessage for ' + componentName + ' to "' + app.langTxtRangeMsgVariable.getValue("dataValue") + '"'); }
}
}
if (typeof invalidMsg != 'undefined') {
if (invalidMsg !== '$_unset_$') {
var compInvalid = compInvalidMsg(componentName); // Lookup to see if component has a special range message to use
if (compInvalid !== null) {
dojoObj.set("invalidMessage",compInvalid); //Override generic message for component
page[componentName].invalidMessage = compInvalid;
if (debugging) { console.log('Overriding generic invalidMessage for ' + componentName + ' to "' + compInvalid + '"'); }
} else {
dojoObj.set("invalidMessage",app.langTxtInvalidMsgVariable.getValue("dataValue")); //Set generic invalid message
page[componentName].invalidMessage = app.langTxtInvalidMsgVariable.getValue("dataValue");
if (debugging) { console.log('Setting generic invalidMessage for ' + componentName + ' to "' + app.langTxtInvalidMsgVariable.getValue("dataValue") + '"'); }
}
}
}
if (debugging) { console.log(componentName + ' - id: ' + id + ' rngMsg: ' + rngMsg + ' invalideMsg: ' + invalidMsg); }
}
} else {
if (debugging) { console.log('Skipping ' + componentName); }
}
}
}
if (debugging) { console.log('Completed setting generic messages'); }
} catch(errC) {
var msg = 'languageDataVariableResult: Error encounted during generic message converions! ' + errC;
console.log(msg);
app.toastWarning(msg);
}

Value from a text field is not returning anything

I'm trying to build a little app where the user enters a store name which will become the alt text to an image and the URL of their store which will become a h ref, which will then generate some copy and paste code to use on their website.
The problem I have is that when trying to use vanilla JavaScript to read the value of the store name nothing is showing.
Please see my fiddle:
http://jsfiddle.net/willwebdesigner/gVCcm/
$(document).ready(function() {
// Creates a method and prototype for the Array for splicing up words
Array.prototype.removeByValue = function(val) {
for(var i=0; i<this.length; i++) {
if(this[i] == val) {
this.splice(i, 1);
break;
}
}
}
var myStore = {
storeName: document.getElementById("storeName").value,
Url: document.getElementById("yourURL"),
instructions: "<p>Please copy the code above and paste it into your webpage to display the shop4support logo and a link to your store.</p>",
blackLogo: function() {
return "<img src="https://www.shop4support.com/Resources/home/information/InformationForProviders/Availables4s-bk.jpg" alt="" + this.storeName + " is available on shop4support" />";
}
}
$("#urlForm").submit(function(e) {
// Clear output form first
$(output).html(' ');
e.preventDefault();
// Create an array for conditional statements
var address = [];
address = $(myStore.Url).val().split("www");
// Need to put a conditional in here to detect if https://
if(address[0] === "https://") {
$(output)
.slideDown()
.prepend("<a href=""+ $(myStore.Url).val() + "">" + myStore.blackLogo() + "</a> ")
.append(myStore.instructions);
} else if(address[0] === "http://") {
// Remove the http part off the URL
var removeHttp = address;
removeHttp.removeByValue('http://');
$(output)
.slideDown()
.prepend("<a href="https://www" + removeHttp + "">" + myStore.blackLogo() + "</a> ")
.append(myStore.instructions);
} else {
$(output)
.slideDown()
.prepend("<a href="https://"+ $(myStore.Url).val() + "">" + myStore.blackLogo() + "</a> ")
.append(myStore.instructions);
}
});
});
Thanks Will

The moment you are initializing the myStore object the values aren't filled in yet. You will have to do this on submit.
So you can move the var myStore = {} into the submit callback:
http://jsfiddle.net/gVCcm/1/

update your code as :
$("#urlForm").submit(function(e) {
myStore.storeName= (document.getElementById("storeName").value);
/* The rest of your code */
}

Initialize your myStore variable in:
$("#urlForm").submit(function(e) {
var myStore = {}
});