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

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

Answer 2

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.

Answer 3

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

Answer 4

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

Answer 5

Use local scoped Ajax Events

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

Answer 6

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