How to wait for ajax success handler to finish before executing another

Question

I have the following scenario in my javascript:

1. Ajax loads a record.
2. Based on the return value of that record, another ajax call grabs a html form that is added into the DOM
3. When #2 is complete, the records that were obtained from #1 are then loaded into the form created in #2.

I am using the when so that when #2 is complete, I can load the form values from #1. The problem is, is that it appears that when doesn't wait for the success handler to finish, only the ajax call itself. I need to wait for the success function of #2 to complete (as this is what created the form in the DOM) before I can continue with loading the form with values.

If I add an alert1 at step #2, it works (which I'm guessing is because it is waiting for the alert to be clicked, and in that time, the success handler has finished.

Answer 1

Do something like this where you use nested functions in the success callback:

$.ajax({
    url: "somewhere"
    success: function(data1){
        //Use data1 to determine ajax request #2
        $.ajax({
            url: "somewhere else"
            success: function(data2){
                //Do stuff with data1 and data2
             }
         });
      }
});

Answer 2

You can use jQuery promises, i.e.:

var loadingData = $.get(loadDataUrl);
var loadingHtml = $.get(grabHtmlUrl);
$.when(loadingData, loadingHtml).done(function(loadDataResult, loadHtmlResult){
     //add the html to the dom
     //use data to update the dom as you please       
});

Note: $.get is just a version of $.ajax that performs a get request

Sources: http://api.jquery.com/deferred.promise/

http://api.jquery.com/jquery.get/

http://api.jquery.com/jquery.ajax/

http://api.jquery.com/jquery.when/

Answer 3

You should use when or success not both. It sounds like (although code samples would make this clearer) you are attaching two separate listeners to the ajax call, but you only want one to execute after the other.
I'd either roll both into one event like:

$.ajax( ... , function(){
    // success
    // prep stuff here
    $.ajax( ... , function(){
        // second success
        // do final stuff here
    });
});

Or wrap you ajax call inside another promise (this may require a bit more reading around jQuery promises).

But if you do something like

$.when($.ajax( ... , function(){
    // thing a
}).then(function(){
    // thing b
});

Thing a and b will execute at the same time, because they are designed for pretty much the same thing.

Answer 4

Bit late to answer, but

Much better way is to use promises as the way they designed to be used

Pseudo implementation

var promise = $.ajax({
    url: url,
    data: data
}).done(function (data) {
    var result = process(data);
    return $.ajax({
        url: url,
        data: result
    });
}).done(function (data) {
    // data is the result of second ajax call
});