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

Question

I am using .ajaxStart() and .ajaxStop() to show a modal while an ajax request is being made. (between start and stop)

Now I'd like to add a longpoll function that keeps waiting for notifications, similar to the one on the left upper corner of this site.

My problem now lies in disabling this modal only for the longpolling request..

Registering "loading screen" on and off handlers:

$(document).ajaxStart(handleAjaxStart);
$(document).ajaxStop(handleAjaxStop);

My longpoll function:

$.ajax({
    timeout: 35000,
    url: longPollUrl,
    success: function(data){
        if(data.queCount) $('#numQueCount').html(data.queCount);
        if(data.queAccept) $('#numQueAccept').html(data.queAccept);
    }, 
    dataType: 'json',
    complete: longpoll
});

I tried:

$().off('ajaxStart');
$().off('ajaxStop');

..and reattaching the handlers after starting the polling, but no joy.

I also tried introducing a global variable into handleAjaxStart() that would return at the first line of the function, but that seems to completely kill the loading screen.

Any ideas how this can be achieved?

Shuping

Answer 1

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
});

Shuping

Very glad they thought of this exact scenario, that we would need to bypass those catch-all ajax functions. Setting global to false will suppress all global triggers: ajaxComplete(), ajaxError(), ajaxSend(), ajaxStart(), ajaxStop(), ajaxSuccess(), not just Start and Stop. – Ludendorff

Good find! And good thinking on jQuery's part to preempt this. – Jori

Answer 2

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.

Oxpecker