How to know if there is any Ajax Request and ajax Success

Question

I wonder how can I code this

//if there is any ajax request
   $("#loader").css("display","block");
//on success:
    $("#loader").css("display","none");

Note : i am not going to code it again and again in my each ajax request function. i want it Genric. so that my script knows if there is any ajax request do $("#loader").css("display","block"); and if there is any ajax success do $("#loader").css("display","none");

Answer 1

The magical thing you are looking for is jQuery.ajaxStart() and jQuery.ajaxStop(). You might also find jQuery.ajaxComplete() useful.

Example:

$("#loader").ajaxStart(function() {
   $(this).show();
}).ajaxStop(function() {
   $(this).hide();
});

You should use the hide() and show() methods instead of changing the display CSS attribute.

Answer 2

Take a look at $.ajaxStart and $.ajaxEnd when you wire up your app in $.document(ready):

$.ajaxStart(function(){
  $("#loader").css("display", "block");
})
.ajaxStop(function(){
  $("#loader").css("display", "none");
});

UPDATE forgot about ajaxStop...@Cory's answer reminded me. Updated my answer.