I got stuck in this problem for an hour. I am thinking this is something relates to variable scoping ? Anyway, here is the code :
function loadRoutes(from_city)
{
$.ajax(
{
url: './ajax/loadRoutes.php',
async : true,
cache : false,
timeout : 10000,
type : "POST",
dataType: 'json',
data :
{
"from_city" : from_city
},
error : function(data)
{
console.log('error occured when trying to load routes');
},
success : function(data)
{
console.log('routes loaded successfully.');
$('#upperright').html(""); //reset upperright box to display nothing.
return data; //this line ruins all
//this section works just fine.
$.each(data.feedback, function(i, route)
{
console.log("route no. :" + i + " to_city : " + route.to_city + " price :" + route.price);
doSomethingHere(i);
});
}
});
}
The for each section works just fine inside the success callback region. I can see Firebug console outputs the route ids with no problem at all.
For decoupling purpose, I reckon it would be better to just return the data object, which in JSON format, to a variable in the caller function, like this:
//ajax load function
function findFromCity(continent, x, y)
{
console.log("clicked on " + continent + ' ' + x + ',' + y);
$.ajax(
{
url: './ajax/findFromCity.php',
async : true,
cache : false,
timeout : 10000,
type : "POST",
dataType : 'json',
data :
{
"continent" : continent,
"x" : x,
"y" : y
},
error : function(data)
{
console.log('error occured when trying to find the from city');
},
success : function(data)
{
var cityname = data.from_city;
//only query database if cityname was found
if(cityname != 'undefined' && cityname != 'nowhere')
{
console.log('from city found : ' + cityname);
data = loadRoutes(cityname);
console.log(data);
}
}
});
}
Then all of a sudden, everything stops working! Firebug console reports data object as "undefined"... hasn't that being assigned by the returning object from the method loadRoutes(cityname)?
Sorry my overall knowledge on javascript is quite limited, so now I am just like a "copycat" to work on my code in an amateur way.
Edited : Having seen Nick's hint, let me work on it now and see how it goes.
Edited 2nd :
bear with me, still stuck in this:
//ajax load function
function findFromCity(continent, x, y)
{
console.log("clicked on " + continent + ' ' + x + ',' + y);
var cityname = "nowhere"; //variable initialized.
$.ajax(
{
url: './ajax/findFromCity.php',
async : true,
cache : false,
timeout : 10000,
type : "POST",
dataType : 'json',
data :
{
"continent" : continent,
"x" : x,
"y" : y
},
error : function(data)
{
console.log('error occured when trying to find the from city');
},
success : function(data)
{
cityname = data.from_city;
//only query database if cityname was found
if(cityname != 'undefined' && cityname != 'nowhere')
{
console.log('from city found : ' + cityname);
//data = loadRoutes(cityname);
//console.log(data);
}
}
});
return cityname; //return after ajax call finished.
}
Firebug console prints out something interesting :
nowhere
from city found : Sydney
I thought the order should be at least reversed like this :
from city found : Sydney
nowhere
So, basically, the variable defined in success region has a completely different scope from the same variable outside? This sounds bizarre to me at first but now I see it.
Still, don't know how to pass the json object out of the success callback to assign it to another variable...
Conclusion : okay, I got it, working on "pass by reference" to make use of side-effect to change a variable passed in by function parameter now... Which is not directly related to this question.
Many pages send AJAX requests to a server. Because this relies on the cooperation of the server and the network between the client and the server, you can expect these AJAX errors: Your JavaScript program receives an error response instead of data; Your program has to wait too long for the response.
You can store your promise, you can pass it around, you can use it as an argument in function calls and you can return it from functions, but when you finally want to use your data that is returned by the AJAX call, you have to do it like this: promise. success(function (data) { alert(data); });
success and Error : A success callback that gets invoked upon successful completion of an Ajax request. A failure callback that gets invoked in case there is any error while making the request.
AJAX success is a global event. Global events are triggered on the document to call any handlers who may be listening. The ajaxSuccess event is only called if the request is successful. It is essentially a type function that's called when a request proceeds.
The success
callback occurs when the ajax call completes, so nothing is actually returned by your function, because that statement doesn't run until later.
In the AJAX scenario, you need to get the data object, then call what should run next, because any success
or complete
callback functions will happen after the code you're running, when the response from the server comes back.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With