jQuery multiple ajax loading animations on calls

Question

Hello,

On a page I have different element which I bound yo different Ajax calls. For example one a.click is requesting x.php another one down the same page requests y.php.

What I like to do is place an individual loading image for each. ajaxStart and ajaxStop won't do it since they are fired everytime, no matter which one called.

So how I can do it for individual calls?

Answer 1

You can use the beforeSend and complete callbacks in the individual $.ajax calls like this:

$.ajax({
  url: 'myPage1.html',
  beforeSend: function() { 
    $("#loading1").fadeIn();
  },
  success: function(data) {
    //Current code
  },
  complete: function() {
    $("#loading1").fadeOut('fast');
  }
});


$.ajax({
  url: 'myPage2.html',
  beforeSend: function() { 
    $("#loading2").fadeIn();
  },
  success: function(data) {
    //Current code
  },
  complete: function() {
    $("#loading2").fadeOut('fast');
  }
});

See here for a full list of available callbacks