How to call .ajaxStart() on specific ajax calls

I have some ajax calls on the document of a site that display or hide a progress bar depending on the ajax status

  $(document).ajaxStart(function(){ 
        $('#ajaxProgress').show(); 
    });
  $(document).ajaxStop(function(){ 
        $('#ajaxProgress').hide(); 
    });

I would like to basically overwirte these methods on other parts of the site where a lot of quick small ajax calls are made and do not need the progress bar popping in and out. I am trying to attach them to or insert them in other $.getJSON and $.ajax calls. I have tried chaining them but apparently that is no good.

$.getJSON().ajaxStart(function(){ 'kill preloader'});

Solution 1:

2018 NOTE: This answer is obsolete; feel free to propose an edit to this answer that will work.

You can bind the ajaxStart and ajaxStop using custom namespace:

$(document).bind("ajaxStart.mine", function() {
    $('#ajaxProgress').show();
});

$(document).bind("ajaxStop.mine", function() {
    $('#ajaxProgress').hide();
});

Then, in other parts of the site you'll be temporarily unbinding them before your .json calls:

$(document).unbind(".mine");

Got the idea from here while searching for an answer.

EDIT: I haven't had time to test it, alas.

Solution 2:

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({
        url: "google.com",
        type: "GET",
        dataType: "json",
        cache: false,
        global: false, 
        success: function (data) {

Solution 3:

If you put this in your function that handles an ajax action it'll only bind itself when appropriate:

$('#yourDiv')
    .ajaxStart(function(){
        $("ResultsDiv").hide();
        $(this).show();
    })
    .ajaxStop(function(){
        $(this).hide();
        $(this).unbind("ajaxStart");
    });

Solution 4:

Use local scoped Ajax Events

                success: function (jQxhr, errorCode, errorThrown) {
                    alert("Error : " + errorThrown);
                },
                beforeSend: function () {
                    $("#loading-image").show();
                },
                complete: function () {
                    $("#loading-image").hide();
                }

Solution 5:

Furthermore, if you want to disable calls to .ajaxStart() and .ajaxStop(), you can set global option to false in your .ajax() requests ;)

See more here : How to call .ajaxStart() on specific ajax calls