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

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.

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) {

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

Use local scoped Ajax Events

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

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 : https://stackoverflow.com/questions/1191485/how-to-call-ajaxstart-on-specific-ajax-calls

Unfortunately, ajaxStart event doesn't have any additional information which you can use to decide whether to show animation or not.

Anyway, here's one idea. In your ajaxStart method, why not start animation after say 200 milliseconds? If ajax requests complete in 200 milliseconds, you don't show any animation, otherwise you show the animation. Code may look something like:

var animationController = function animationController()
{
    var timeout = null;
    var delayBy = 200; //Number of milliseconds to wait before ajax animation starts.

    var pub = {};

    var actualAnimationStart = function actualAnimationStart()
    {
        $('#ajaxProgress').show();
    };

    var actualAnimationStop = function actualAnimationStop()
    {
        $('#ajaxProgress').hide();
    };

    pub.startAnimation = function animationController$startAnimation() 
    { 
        timeout = setTimeout(actualAnimationStart, delayBy);
    };

    pub.stopAnimation = function animationController$stopAnimation()
    {
        //If ajax call finishes before the timeout occurs, we wouldn't have 
        //shown any animation.
        clearTimeout(timeout);
        actualAnimationStop();
    }

    return pub;
}();


$(document).ready(
    function()
    {
        $(document).ajaxStart(animationController.startAnimation);
        $(document).ajaxStop(animationController.stopAnimation);
    }
 );

I have a solution. I set a global js variable called showloader (set as false by default). In any of the functions that you want to show the loader just set it to true before you make the ajax call.

function doAjaxThing()
{
    showloader=true;
    $.ajax({yaddayadda});
}

Then I have the following in my head section;

$(document).ajaxStart(function()
{
    if (showloader)
    {
        $('.loadingholder').fadeIn(200);
    }
});    

$(document).ajaxComplete(function() 
{
    $('.loadingholder').fadeOut(200);
    showloader=false;
});

use beforeSend or complete callback functions in ajax call like this way..... Live Example is here https://stackoverflow.com/a/34940340/5361795

Source ShoutingCode

Use ajaxSend and ajaxComplete if you want to interspect the request before deciding what to do. See my reply here: https://stackoverflow.com/a/15763341/117268

<div class="Local">Trigger</div>

<div class="result"></div>
<div class="log"></div>

$(document).ajaxStart(function() {
$( "log" )text( "Trigger Fire successfully." );
});

$( ".local" ).click(function() {
$( ".result" ).load("c:/refresh.html.");
});

Just Go through this example you get some idea.When the user clicks the element with class Local and the Ajax request is sent, the log message is displayed.