JavaScript function undefined from console no visible response - javascript

I've got this function in the body of my jQuery Mobile page:
<script>
function theManufacturers(inputSearch){
var qryString = 0;
//set up string for adding <li/>
var li = "";
var jqxhr = $.getJSON("http://someurl.com/page.aspx?sumvar=hello&callback=?",
function(data){
$.each(data.items, function(i,item){
li += '<li>' + item.Manufacturer + '</li>';
});
$("#manufacturer-list").append(li);
$("#manufacturer-list").listview("refresh");
});
//jqxhr.done(function() {
// console.log( "second success" );
//});
};
</script>
I've tried calling it form the console in Firebug and the command just turn blue and then the line underneath in grey says "undefined". And obviously the function doesn't appear to be doing anything.

As pointed out by T.J.Crowder & Bill Crisswell, the undefined response was to be expected and is doesn't actually suggest anything wrong with my JS function.
The actual problem was that I'd copied the code across from another page in the project and hadn't updated the references to the correct listview in my JS. Hence the listview on the page wasn't being populated with the resultant data pulled in by the function.
At least I learned that the undefined console response was the correct output for my JS, and I now know why. Thanks to everyone who pointed this out.

Related

Could someone explain me this block of code line by line? Jquery - javascript

I've just started to learn jquery&javascript, and in my project I've found this block of code, and I'm wondering what does it mean, some parts are confusing to me, all I've understand so far is that this is triggering on some control change event but how can I know which control and how does this work in fact?
<script type="text/javascript">
$(function () {
$("#MainGroupID").change(function () {
var val = $(this).val();
var subItems="";
$.getJSON("#Url.Action("GetSubgroupByMainGroup", "Article")", {id:val} ,function (data) {
$.each(data,function(index,item){
subItems+="<option value='"+item.Value+"'>"+item.Text+"</option>"
});
$("#SubGroupID").html(subItems)
});
});
});
</script>
Please some explanation line by line I'm trying to understand this stuffs how do they work with code behind etc etc :/
Maybe it's stupid question but .. :/
Thanks guys,
Cheers!
//$(function () {
this part is used to invoke the function when the DOM is ready.
$("#MainGroupID").change
//is a change event - like the value of the input has changed.
var val = $(this).val();
//You are picking up the value of the input
var subItems="";
// you are creating a placeholder variable to hold data
$.getJSON(
//this is a call to get json data.
$.each
//you are now looping through the data obtained from the json call
subItems+="<option value='"+item.Value+"'>"+item.Text+"</option>"
//you are now populating the variable you had set
$("#SubGroupID").html(subItems)
//this places the content of the obtained data and the structure from the placeholder into the div with the id SubGroupID

Grabbing title of page from an API is alerting undefined?

This bit of code below scans an API on Wikipedia, and then is supposed to alert the title of it by getting the JSON property "title". However, it just alerts undefined, and for some reason, it alerts it twice. What am I doing wrong?
$.get('https://en.wikipedia.org/w/api.php?format=json&action=query&prop=extracts&exintro=&explaintext=&titles=Twitter', function(data){
for (var Object in data){
var Info = data[Object]
var Title = Info["title"]
alert(Title)
}
})
This will work:
$.get('https://en.wikipedia.org/w/api.php?format=json&action=query&prop=extracts&exintro=&explaintext=&titles=Twitter', function(data) {
$.each(data.query.pages, function( index, value ) {
var title = value.title;
alert(title);
});
})
The query returns a data object, which has a query object within it, and one/multiple pages within that. Iterate over each page, and grab the title string.
JSFiddle
Note: You may want to learn to use your browser's debugging tools, and read up on the JSON format.

AJAX call not working in WP based site

This is my first time calling AJAX from within jQuery so please bear with me here. I have a JSON file where I have formatted all of my data, and would like to simply call the JSON file and append some of the data to my HTML.
I should let everybody know that I am using Wordpress as a backbone for the site, though the PHP-based framework is not being utilized at all to my knowledge in this call, I did try and write out my URL to make sense within the jQuery. All of the id's in the slugArray array exist within my HTML.
OK! So:
JSON file can be seen here: http://bmgz.rtcgraphics.com/wp-content/themes/bmgz/data/whatwedo.json
jQuery:
var slugArray = [
'#project-management',
'#economic-incentives',
'#site-selection',
'#stakeholder-engagement-and-events',
'#lobbying-and-advocacy',
'#public-policy-and-issues-management',
'#digital-communications',
'#event-and-trade-show-materials',
'#presentation-and-print-design'
]
function getWWD(){
for (i=0; i<=slugArray.length; i++) {
var selection = slugArray[i];
$(selection).click(function(){
$.getJSON('wp-content/themes/bmgz/data/whatwedo.json', function(result){
alert("It works!");
var entry=result.whatwedo[0].id;
console.log(entry);
});
});
}
};
getWWD();
When I run this, I don't get anything, not even my alert. I was getting a 404 error when I typed in the URL wrong for the $.getJSON request, so I know the computer is reading it at least partly. Thanks guys! I appreciate any input!
Try with:
var slugArray = [
'#project-management',
'#economic-incentives',
'#site-selection',
'#stakeholder-engagement-and-events',
'#lobbying-and-advocacy',
'#public-policy-and-issues-management',
'#digital-communications',
'#event-and-trade-show-materials',
'#presentation-and-print-design'
]
function getWWD(){
for (i=0; i<=slugArray.length; i++) {
var selection = slugArray[i];
$(selection).click(function(){
$.getJSON('http://bmgz.rtcgraphics.com/wp-content/themes/bmgz/data/whatwedo.json', function(result){
alert("It works!");
var entry=result.whatwedo[0].id;
console.log(entry);
});
});
}
};
getWWD();

Javascript array access outside function

I'm trying to get json data with $.getJSON and it's working fine.
This is my code:
$(document).ready(function(){
var MainArray = new Array();
$.getJSON('check-location.php?onload=true', function(result) {
$.each(result, function(i){
MainArray[i] = result[i].CountryName;
});
});
$(".drop-down").append("<div>" + MainArray[0] + "</div>");
});
I'm trying to assign it to array for later usage, but when I try to access it and display it I get undefined.
I get all the data for sure, but when I assign it to MainArray I cant access it outside the $.each function and I've no idea why.
That's because Ajax is asynchronous, you are trying to append a non-existent value:
$.getJSON('check-location.php?onload=true', function(result) {
$.each(result, function(i){
MainArray[i] = result[i].CountryName;
});
$(".drop-down").append("<div>" + MainArray[0] + "</div>");
});
Because $.getJSON is asynchronous, the MainArray isn't updated until the data is successfully returned.
But, the line
$(".drop-down").append("<div>" + MainArray[0] + "</div>");
will have already executed before the $.getJSON is completed...hence it is undefined.
You should move this somewhere and execute it when your data has returned, ie. in the callback
Like every body said, because its an asynchronous request
you can turn that off (not a very good practice, but it will fix the problem)
Add this before the $.getJSON call
$.ajax({ async: "false" });

Trouble receiving names from facebook

I have a list of facebook user id numbers from an xml response and all I want to do is write html that places their picture next to their name. Unfortunately I am having a strange problem:
var friendList = "";
$(xml).find("id").each(function ()
{
var tId = $(this).text();
var tUrl = "/" + tId;
var perName = "";
FB.api(tUrl, function(response) {
perName += response.name;
});
alert(perName);
friendList += "<div class=\"picSpacer\"><img src=\"https://graph.facebook.com/"+tId+"/picture/?type=large\" class=\"friendDIV\" /><div class=\"nameBox\">"+perName+"</div></div>";
});
With this code it works, but if I remove the alert it does not work. The alert pops up undefined. It's as if the string perName has to be accessed once before it actually contains the user's name. I don't understand how this can be.
it's simple.
FB.api() performs an asynchronous request, when it's finished
function(response) {
//do entire DOM manipulation here
}
gets called.
Now alert() delays execution long enough, so that that callback gets calland and perName gets defined.
Just move your DOM manipulation code into the callback to make sure you actually have the response.

Categories

Resources