Question

I am having a problem, or perhaps a lack of understanding, with the jQuery execution order of $.get() function. I want to retrieve some information from a database server to use in the $.ready() function. As you all know, when the get returns, it passes the data to a return handler that does something with the data. In my case I want to assign some values to variables declared inside the ready handler function. But the problem is, the return handler of $.get() does not execute until after ready has exited. I was wondering if (a) am I doing this right/is there a better way or if (b) there was a way around this (that is, force the get return handler to execute immediately or some other fix I’m not aware of). I have a feeling this is some closure thing that I’m not getting about JavaScript.

As per request, I’ll post an example of what I mean:

$(function() {
    var userID;

    $.get(uri, function(returnData) {
                   var parsedData = JSON.parse(returnData);
                   userID = parsedData.userID;
               });
  });

So as you can see, I’m declaring a variable in ready. Then using a get call to the database to retrieve the data needed. Then I parse the JSON that is returned and assign the userID to the variable declared before. I’ve tested it with a couple alerts. An alert after the get shows userID as undefined but then an alert in get’s return handler shows it to be assigned.

Answer 1

$.get() is asynchronous. You have to use a callback to fill your variable and do the computation after the request is complete. Something like:

$(document).ready(function(){

    $.get( "yourUrl", function( data, textStatus, jqXHR ) {
        var myData = data; // data contains the response content
        // perform your processing here...
        registerHandlers( myData ); // you can only pass "data" off course...
    });

});

// your function to register the handlers as you said you need to.
function registerHandlers( data ) {
    // registering handlers...
}