Question

I have a problem passing data from a JQuery ajax call back to the calling location. The code in question is below:

jQuery("#button").click(function()
{   
    for(var i = 0;i < data.length; i++)
    {
        result = updateUser(data[i]); //result is not populated..
                    alert(result); //prints 'undefined'

    }
});

function updateUser(user_id)
{       
    jQuery.ajax({
        url:"/users/update/"+user_id,
        type:"GET",
        async: false,
        success: (function(data){           
            //if I alert "data" here it shows up correctly
                            //but if i try to return it like below 
                            //it does not get passed correctly 
                            return data; 
        })
    });

Any pointers are greatly appreciated

Answer 1

You cannot return value from an AJAX success handler like that. AJAX is asynchronous so execution will proceed to the next line where result is undefined. The only way you can get data back from an asynchronous operation is to use a callback. A callback is a function that gets called when the asynchronous operation finishes what it is doing:

jQuery("#button").click(function () {
    for (var i = 0; i < data.length; i++) {
        updateUser(data[i], function(result) {
            alert(result);
        });
    }
});

function updateUser(user_id, callback) {
    jQuery.ajax({
        url: "/users/update/" + user_id,
        type: "GET",
        success: callback
    });
}

Here, you’re calling the callback in the success handler of the AJAX call and so now you have access to the data that was returned by the AJAX call.