JQuery ajax () returns json object of another function on successful error

Question

I am stuck with this problem for an hour. I think this has something to do with variable reach? 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); }); } }); 

}

For each section, it works very well inside the success callback area. I see that the Firebug console displays route identifiers without any problems.

To unleash the goal, I believe that it would be better to simply return the data object, which is in JSON format, to a variable in the caller's function, for example:

 //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! The Firebug console reports the data object as "undefined" ... does the return object assign the loadRoutes (cityname) method?

Sorry that my general knowledge in javascript is pretty limited, so now I'm just a “copycat” to work on my code in an amateur way.

Edited: Seeing Nick’s prompt, let me work on it now and see how it happens.

Edited 2:

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. } 

The Firebug console produces something interesting:

 nowhere from city found : Sydney 

I thought that the order should at least be changed as follows:

 from city found : Sydney nowhere 

So basically, a variable defined in the success area has a completely different area from the same variable outside? It sounds weird at first, but now I see it.

However, I don't know how to pass the json object from the success callback to assign it to another variable ...

Conclusion: well, I got it while working on a "pass by reference" to use a side effect to change the variable passed by the functional parameter, now ... Which is not directly related to this issue.

Answer 1

The success callback occurs when the ajax call completes, so your function actually returns nothing, because this statement does not run longer.

In an AJAX script, you need to get a data object and then call what needs to be done next, because any success or complete callback functions will execute after the code that you run when the response from the server returns.

Answer 2

Perhaps you can try this method:

 function loadRoutes(parameters) { return $.ajax({ type: "GET", async: false, // This is important... please see ref below // Other Settings (don't forget the trailing comma after last setting) success: function () { console.log('Success'); }, error: function () { console.log('Error'); } }).responseText; } 

Thus, the query '$ .ajax' is appended with '.responseText', and the query itself becomes the return value.

Please note: this use - returning the result of a call to a variable - requires a synchronous (blocking) request. Therefore use "async: false" in the settings.

To return a JSON value, you can use:

 return $.parseJSON($.ajax({ // Other settings here... }).responseText); 

See details http://api.jquery.com/jQuery.ajax .

Answer 3

Perhaps the problem is with the "data."

In the second example, which data was returned by the json object, and which one was sent?