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.

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.

• javascript
• jquery

5 Answers 5

$.get() is asynchronous. You have to use a callback to fill your variable and do the putation after the request is plete. 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...
}

$.get is an ajax request. A in AJAX stand for asynchronous, so script won't wait for this request to finish, but instead will proceed further with your code.

You can either use plete callback or you can use $.ajax and set async to false to perform synchronous request.

The $.get() function executes an async httprequest, so the callback function will be executed whenever this request returns something. You should handle this callback outside of $.ready()

Maybe if you explain exactly what do you want to do, it would be easier to help!

Are you looking for something like:

$(document).ready(function(){
    var variable1, variable 2;
    $.get('mydata.url', function(data){
        variable1 = data.mydata1;
        variable2 = data.mydata2;
    });
});

If you declare the variables first, then you can set their values within the get call. You can add a function call at the end of the get handler to call a separate function using these values? Without some kind of example, its hard to go into any more detail.

Without seeing the full code, my guess is that you should declare your variable outside $.ready; initialize it in ready for the initial page load; then update it from the get callback handler.

for example

var x = ""; // declaration

$(document).ready(function() { x = "initial value"; });

$.get(...).success(function() { x = "updated from ajax"; });