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 tha

Answer 1

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/