Disable ajaxStart() and ajaxStop() for a specific request Disable ajaxStart() and ajaxStop() for a specific request ajax ajax

Disable ajaxStart() and ajaxStop() for a specific request


I figured it out..

There is an attribute in the options object .ajax() takes called global.

If set to false, it will not trigger the ajaxStart event for the call.

$.ajax({    timeout: 35000,    url: longPollUrl,    success: function(data){        if(data.queCount) $('#numQueCount').html(data.queCount);        if(data.queAccept) $('#numQueAccept').html(data.queAccept);    },     global: false,     // this makes sure ajaxStart is not triggered    dataType: 'json',    complete: longpoll});


After reading all possible solutions, I want to combine answers.

Solution 1: Bind/Unbind

//binding$(document).bind("ajaxStart.mine", function() {    $('#ajaxProgress').show();});$(document).bind("ajaxStop.mine", function() {    $('#ajaxProgress').hide();});//Unbinding$(document).unbind(".mine");

It is a depreciated solution. Before jQuery 1.9, global events of ajax like ajaxStart, ajaxStop, ajaxError etc. can be binded to any element. After jQuery 1.9:

As of jQuery 1.9, all the handlers for the jQuery global Ajax events, including those added with the .ajaxStart() method, must be attached to document.

Therefore we cannot bind/unbind these events to custom namespaces.

Solution 2: Set the property global to false

$.ajax({        url: "google.com",        type: "GET",        dataType: "json",        global: false, //This is the key property.        success: function (data) {                   console.log(data);                },        error: function (data) {                   console.log(data);                }       });

This solution works to disable ajaxStart()/ajaxStop() event(s). However, it also makes disable ajaxComplete(), ajaxError(), ajaxSend(), ajaxSuccess(). If you don't use these global events, it seems ok, but when it is needed, you have to come back and change your solution for all pages where you set global: false.

Solution 3: Use global variable

var showLoadingEnabled = true;$(document).ready(function () {    $('#loading')        .hide()  // at first, just hide it        .ajaxStart(function () {            if (showLoadingEnabled) {                $(this).show();            }        })        .ajaxStop(function () {            if (showLoadingEnabled) {                $(this).hide();            }        });});function justAnotherFunction() {    window.showLoadingEnabled = false;    $.ajax({        url: 'www.google.com',        type: 'GET',        complete: function (data) {            window.showLoadingEnabled = true;            console.log(data);        }    });}

Global variables should not be used in javascript files. However, this is the simplest solution, I can find.

I prefered the third solution for my project.