get returned values from jquery get?

Question

I am making jquery calls to get and getJSON, but cannot access returned values outside of callback function. How can I access the returned data?

        var firstid;
        var nextid;

    $.get(callUrl, function(data) {  // call to add node
         var n = data.indexOf("id-");
         var m = data.indexOf("id-");
         firstid = data.substr(n+3,m - (n+3));
         nextid = data.substr(m+3);

             alert("firstid:" + firstid);  // returns correct value
    });

        alert("firstid:" + firstid);  // returns undefined for firstid

how can I get firstid outside the function?

Answer 1

ALL AJAX CALLS ARE ASYNCHRONOUS

SO you need to use callbacks. anything outside that will return undefined.

$.get(callUrl, function(data) {  // call to add node
     var n = data.indexOf("id-");
     var m = data.indexOf("id-");
     firstid = data.substr(n+3,m - (n+3));
     nextid = data.substr(m+3);

     doSomethingWithFirst(firstid);
});

function doSomethingWithFirst(f)   {
     //NOW do something
}

Answer 2

This is because it is done asynchronous (one of the basic principles of AJAX). You can set async to false or use some other callback construction to use your value returned from the get call.

Answer 3

The second alert("firstid:" + firstid); returns undefined because at the moment of execution it is in fact undefined.

The first alert("firstid:" + firstid); returns the expected result as it fires after the $.get is finished getting.

AJAX - Stands for Asynchronous JavaScript and XML. Asynchronous events are those occurring independently of the main program flow. While you can set the request to synchronous it is not recommended.

If you wrapped your second alert("firstid:" + firstid); in a timeout with a 5 second delay it would display the expected result.

setTimeout(function() { alert("firstid:" + firstid); }, 5000);

Or you could wrap your second alert("firstid:" + firstid); in an interval with a 1 second delay it would eventually display the expected result.

var callback_interval = setInterval(function() {
    if(typeof(firstid) == 'undefined') return;
    clearInterval(callback_interval);
    alert("firstid:" + firstid);
}, 1000);

But it's best to work with the variables directly in the $.get success callback or via function calls within that success callback.