jQuery ajax() returning json object to another function on success causes error

Question

Hi all:

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.

Answer 1

Might be a "data" scope problem.

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

Answer 2

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.

Answer 3

You could maybe 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;
}

So basically, '.responseText' is added to the '$.ajax' request and the request itself then becomes the return value.

Please note: This usage - returning the result of the call into a variable - requires a synchronous (blocking) request. So use 'async:false' in the settings.

To return a JSON value you could use:

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

For more info see: http://api.jquery.com/jQuery.ajax.