Load does not start the full ajaxSetup handler at completion

Question

I have

// Ajax setup $.ajaxSetup({ beforeSend: function() { $('#general-ajax-load ').fadeIn(); }, complete: function() { $('#general-ajax-load ').fadeOut(); } }); 

on the page load to set the loading animation for all my ajax calls. It works fine except for load () calls. For downloads, only beforeSend is launched, and termination is never called, which results in an animation that never disappears.

Any idea?

Answer 1

According to http://bugs.jquery.com/ticket/4086#commentrige , the "right" way:

 $(document).ajaxSend(function(event, jqXHR, settings) { $('#general-ajax-load ').fadeIn(); }); $(document).ajaxComplete(function(event, jqXHR, settings) { $('#general-ajax-load ').fadeOut(); }); 

I just did some testing and really worked in all cases (including $.load ).

Answer 2

Adding success fixed the problem, thanks (I can swear I tried this before)

  $.ajaxSetup({ beforeSend: function() { $('#general-ajax-load ').fadeIn(); }, complete: function() { $('#general-ajax-load ').fadeOut(); } success: function() { $('#general-ajax-load ').fadeOut(); } }); 

:)

Answer 3

The $.load reference says:

... This is roughly equivalent to $ .get (url, data, success), except that it is more of a method than a global function, and it has an implicit callback function .

It would seem that the $.load implicit callback function overrides the complete callback in your $.ajaxSetup . The $.ajaxSetup documentation says:

All subsequent Ajax calls using any function will use the new settings, unless calls are canceled before the next call to $ .ajaxSetup ().

I guess the solution would be to replace your calls with $.load $.get (or the more verbose $.ajax ). You can also try using success .