I have a webpage where ajax calls trigger an overlay using jQuery like so:
$(document).on({ ajaxStart: function() { $("body").addClass("loading"); }, ajaxStop: function() { $("body").removeClass("loading"); } }); This is fine for me, however there are a couple of ajax calls in the page which are background jobs and I do not want the loading message to be shown for those ajax call.
Is there a way to achieve this?
Absolutely. You need to set the global to false in the $.ajax() method only where you don't want to apply the .ajaxStart()/.ajaxStop() events to be fired:
$.ajax({ url:'', global:false, //<----add this success:fn }) You can use it in $.ajax() only.
From the docs:
global (default: true)
Type: Boolean
Whether to trigger global Ajax event handlers for this request. The default is true. Set to false to prevent the global handlers like ajaxStart or ajaxStop from being triggered. This can be used to control various Ajax Events.
$.ajax(). Although i have never tried to use global in $.post() etc. shorthand ajax methods.You can use a flag variable defined in window scope, set it to false when you do not want to ajaxStart / ajaxEnd effect. Otherwise it should be true
$(document).on({ ajaxStart: function() { if(ajaxFlag){ $("body").addClass("loading"); ajaxFlag=true; }, ajaxStop: function() { if(ajaxFlag) $("body").removeClass("loading"); } }); 