How to call .ajaxStart() on specific ajax calls

Question

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


        

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

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

Source ShoutingCode