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 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.