Home » Jquery » How to call .ajaxStart() on specific ajax calls

How to call .ajaxStart() on specific ajax calls

Posted by: admin November 30, 2017 Leave a comment

Questions:

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

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.

Questions:
Answers:

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

Questions:
Answers:

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

Questions:
Answers:

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

Questions:
Answers:

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

Questions:
Answers:

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

Source ShoutingCode

Questions:
Answers:

Use local scoped Ajax Events

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

Questions:
Answers:

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

Questions:
Answers:
<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.

Questions:
Answers:

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

Leave a Reply

Your email address will not be published. Required fields are marked *