CODEWITHSUNDEEP
jqueryajaxprogress-barpreloader
kevzettler
kevzettler

Reputation: 5213

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

Upvotes: 56

Views: 84649

Answers (10)

montrealist
montrealist

Reputation: 5693

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.

Upvotes: 41

Hasnat Safder
Hasnat Safder

Reputation: 2485

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

Upvotes: 27

Ramya Muthukumar
Ramya Muthukumar

Reputation: 141

Use local scoped Ajax Events

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

Upvotes: 14

Zigri2612
Zigri2612

Reputation: 2310

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

Source ShoutingCode

Upvotes: 2

Ollie Brooke
Ollie Brooke

Reputation: 62

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

Upvotes: 2

Praveen04
Praveen04

Reputation: 993

<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.

Upvotes: 0

Jason Rikard
Jason Rikard

Reputation: 1329

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

Upvotes: 15

Emil Stenstr&#246;m
Emil Stenstr&#246;m

Reputation: 14126

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

Upvotes: 0

GxiGloN
GxiGloN

Reputation: 81

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

Upvotes: 7

SolutionYogi
SolutionYogi

Reputation: 32243

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

Upvotes: 5

Related Questions