JQuery AjaxStart For a Particular Element

jQuery doesn't seem to be passing anything to ajaxStart allowing you to know what ajax request was started.

So it's probably best just to handle the distinction in your ajax call sources, rather than trying to handle it in your ajaxStart handlers.

You can achieve this through a global variable through. Declare a global variable like

 var checkBoxAjax = false; 

Then make it true before placing checkbox ajax call like

 $("#defaultproject").change(function () { checkBoxAjax = true; var isitchecked = document.getElementById("defaultproject").checked $.ajax({ url: '@Url.Action("SetDefaultProject")', data: {"id": ProjectId, "isitchecked": isitchecked }, type: 'POST', cache: 'false', success: function (response) { document.getElementById("defaultproject").disabled = "disabled"; }, error: function (xhr) { alert('There was an error. Please try again'); document.getElementById("defaultproject").checked = "" } }); 

});

and in your ajaxStart add a check like

$('.openDialog').ajaxStart(function () { if(!checkBoxAjax) $('#loadingdiv').show(); else checkBoxAjax = false; }).ajaxStop(function () { $('#loadingdiv').hide(); }); 

The problem here is that tying an ajax call to a particular dom object is only specific to the load function or when a context is set.

As such the entire task is not deterministic. Consider the following example:

$.ajax({ url: "example.com", success: function(response) { $('.openDialog').html(response); } }); 

As the call to $.ajax does not explicity mention .openDialog anywhere within its options argument, it is impossible to tell if the success function does load html into it.

However what you could do is trigger the event whenever the context object is set. This will not be very reliable but some purposes it might be okay.

(function(ajax) { $.fn.ajax = function(options) { if (options.context) { $(options.context).trigger("ajaxLoadStart"); return ajax.apply(this, arguments).then(function() { $(options.context).trigger("ajaxLoadEnd"); }); } return ajax.apply(this, arguments); }; })($.fn.ajax); 

Now you can bind to ajaxLoadStart and ajaxLoadEnd:

$(document).on("ajaxLoadStart", ".dialog", function () { $('#loadingdiv').show(); }).on("ajaxLoadEnd", ".dialog", function () { $('#loadingdiv').hide(); }); 

(Note that $(document).on(event, selector, callback) is the same as the deprecated $(selector).live(event, callback);)

Now whenever the div with class dialog is included as context in the options object for $.ajax, it will trigger ajaxLoadStart and then ajaxLoadEnd. As far as I know, jQuery's .load() internally calls $.ajax with the context set on the respective object.

Update

Unfortunately .load doesn't use $.ajax with context. So you will need to attach the triggers to .load as well:

(function(load) { $.fn.load = function(url, params, callback) { if ( typeof url !== "string") return load.apply(this, arguments); this.trigger("ajaxLoadStart"); var done = (function(callback) { return function() { $(this).trigger("ajaxLoadEnd"); if ($.isFunction(callback)) callback.apply(this, arguments); }; })($.isFunction(params) ? params : callback); return load.call(this, url, $.isFunction(params) ? done : params, $.isFunction(callback) ? done : callback); }; })($.fn.load); 

Both of these adapters should work well for now. However if you need to revise them every time you upgrade jquery as this is prone to break (double triggering of events) if the internal workings of jquery changes.