Make sure first ajax function finishes before second one

Question

I have a JavaScript function that makes two consecutive Ajax requests using jQuery. I want to make sure that the first request has loaded before the second function is call

Answer 1

An example implementation:

function callback() {$('div#second_ajax_output').load('http://www.google.com');}
$('div#first_ajax_output').load('http://www.yahoo.com',callback);

Answer 2

$.post("script1.php", {data:"val"}, function(response) {
  $.post("script2.php", {data:response}, function(results) {
    // this second call will be initialized when the first finishes
  });
});

Answer 3

Using jQuery the simplest way is like this:

 $.ajax({
   type: "POST",
   url: "some.php",       
    success: function(msg){
       $.ajax({
         type: "POST",
         url: "some2.php",

         success: function(msg){
             alert( "End of second call" );
         }
      });
    }
 });

Answer 4

Either specify async: false in the $.ajax options, or make the second ajax call in the complete callback of the first call.

Answer 5

In your callback for the first function, make your second call.

Answer 6

The simple way is to fire the second request when the first returns (in the complete callback).

If you need a more sophisticated approach take a look at the AjaxQueue plug-in. You can queue requests this way.