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

ajax, javascript, jquery

Solution

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
             }
         });
      }
});

Problem

I have the following scenario in my javascript: - Ajax loads a record. - Based on the return value of that record, another ajax call grabs a html form that is added into the DOM - 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.

Original source

Related problems