I'm having a problem where a .getJSON request doesn't throw any errors, or anything, it successfully enters the callback function (which says to me the request succeeded, yes?) but never exits. The entire callback function is executed, the data is read correctly, but it never exits.
function getResult(option){
console.log("inside getResult");
$.getJSON(yql, function(data){
console.log("inside getJSON");
var directions = '';
$(data.query.results.div).each(function(i,element){
htmlimg=(typeof(element.img) != 'undefined') ? '<img src="'+element.img.src+'" alt="'+element.img.alt+'">' : '';
switch(typeof(element.p)){
case 'undefined':
htmlp = '';
break;
case 'string':
if(element.p == 'Alternative routes:'){
//end looping
return false;
}
htmlp = '<p>' + element.p + '</p>';
break;
case 'object':
function showhtmlp(element){
var s = '';
if(typeof(element.content != 'undefined')){
s += element.content;
}
if(typeof(element.a) != 'undefined'){
s += element.a.content;
}
if(typeof(element.br) != 'undefined'){
s+='<br>';
}
return s
}
htmlp = '<p>';
if(typeof(element.p[0]) != 'undefined'){
$(element.p).each(function(i, data){
htmlp += showhtmlp(data);
});
} else {
htmlp += showhtmlp(element.p);
}
htmlp += '</p>';
break;
}
directions += '<div>'+htmlimg+htmlp+'</div>';
console.log("Directions: ");
console.log(directions);
});
console.log("OUT OF DIRECTIONS EACH FUNCTION/LOOP");
directions += '<div><a href="' + data.query.diagnostics.url.content + '" target="_blank" title="See on Google Maps"><img src="images/link.png" alt="Link" class="smallicon">View trip on Google Transit</a></div>';
console.log("step1");
trip.transit.routes[option].directions = directions;
console.log("step2");
$('#transitoption'+option).html(directions);
console.log("step3");
});//end of .getJSON
console.log("out of JSON");
}//end of getResult?
console.log("out of Result");
getResult(option);
the console.log command of "before end" is printed out. No errors are thrown. However, it never reaches the console.log of "out of JSON".
When I tried to use the console to debug I saw it getting stuck in a portion of the jquery.min.js code that, while minimized, I could tell had words like "abort" and "timeout" in it.
I'm relatively new to ajax requests, so please be very specific.
the yql variable is:
http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20html%20where%20url%3D%22http%3A%2F%2Fmaps.google.com%2Fm%2Fdirections%3Fsaddr%3D37.78414%2C%2B-122.44108%26daddr%3D37.61688%2C%2B-122.38400999999999%26dirflg%3Dr%26ri%3D0%26date%3D2011-09-02%26time%3D9%3A21pm%22%20and%20xpath%3D'%2F%2Fdiv%2Fdiv'&format=json&diagnostics=true
Do you realize that the JSON call is asynchronous. That means that when you call getJSON, you are just initiating the ajax call. That function will return immediately (and you should see "out of JSON" right away before either of the other statements (unless you have JS errors). Then, when the ajax call succeeds later, you should see "inside getJSON" and "before end" from the success handler function. If you aren't seeing these, then you may have some javascript errors somewhere that are halting execution. You should be checking your error console or debugger console to look for JS errors.
My guess is that either you aren't understanding the order that things happen in and that has you confused or you have JS errors that are halting execution.
It would also help us identify problems if you post the whole code for your getJSON call.