Is there a way to add additional behavior to jquery's $.ajax function

Question

The problem is the following. We have lots of ajax call via $.ajax function. Now I would like to add some loader indicator that will show up when ajax call started and disappear when ajax call finishes. Is there a way to extend jquery's $.ajax function with this kind of behavior.

Of course it is always possible to search for all $.ajax in code and add necessary behavior but I feel somehow lazy to do this.

Answer 1

You use ajaxStart/ajaxStop. may find this article to be of help.

Answer 2

You have jQuery functions for that. Take this example:

<div id="loading">Loading...</div>

Now the jQuery code:

$(document).ready(function() {

  $().ajaxStart(function() { $('#loading').show(); });
  $().ajaxStop(function() { $('#loading').hide(); });

});

ajaxStart detects that an ajax call is being made and executes a function. ajaxStop will detect that the ajax call has ended and will execute a function. This works with any ajax call in your code.