Jak wywołać .ajaxStart() na konkretnym ajax wzywa

Question

Mam ajax połączeń na dokumencie w miejscu, które wyświetlić lub ukryć pasek postępu, w zależności od stanu ajax

$(document).ajaxStart(function(){ 
     $('#ajaxProgress').show(); 
    }); 
    $(document).ajaxStop(function(){ 
     $('#ajaxProgress').hide(); 
    }); 

Chciałbym zasadzie overwirte te metody w innych częściach witryny, gdzie wykonuje się wiele szybkich małych wywołań ajaxowych i nie potrzeba paska postępu pojawiającego się i znikającego. Próbuję dołączyć je do lub wstawić je w innych wywołań $ .getJSON i $ .ajax. Próbowałem ich spętać, ale najwyraźniej to nie jest dobre.

$.getJSON().ajaxStart(function(){ 'kill preloader'}); 

Answer 1

można powiązać ajaxStart i ajaxStop użyciu niestandardowych nazw:

$(document).bind("ajaxStart.mine", function() { 
    $('#ajaxProgress').show(); 
}); 

$(document).bind("ajaxStop.mine", function() { 
    $('#ajaxProgress').hide(); 
}); 

następnie w innych częściach serwisu będziesz tymczasowo Rozpinanie je przed swoje .json wzywa:

$(document).unbind(".mine"); 

wpadł na pomysł z here podczas poszukiwania odpowiedzi.

EDYCJA: Nie miałem czasu, aby to przetestować, niestety.

Answer 2

Niestety zdarzenie ajaxStart nie ma żadnych dodatkowych informacji, których można użyć, aby zdecydować, czy pokazać animację czy też nie.

W każdym razie, jest jeden pomysł. W swojej metodzie ajaxStart, dlaczego nie rozpocząć animacji po powiedzmy 200 milisekund? Jeśli żądania ajax zakończą się w ciągu 200 milisekund, nie pokazujesz żadnej animacji, w przeciwnym razie wyświetlasz animację. Kod może wyglądać mniej więcej tak:

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 3

Jeśli umieścisz to w swojej funkcji, która obsługuje działanie ajax To będzie wiązać tylko sobie, gdy właściwe:

$('#yourDiv') 
    .ajaxStart(function(){ 
     $("ResultsDiv").hide(); 
     $(this).show(); 
    }) 
    .ajaxStop(function(){ 
     $(this).hide(); 
     $(this).unbind("ajaxStart"); 
    }); 

Answer 4

Ponadto, jeśli chcesz niepełnosprawnymi wywołań .ajaxStart() i .ajaxStop(), można ustawić global opcja false w swoim .ajax() wniosków;)

Zobacz więcej tutaj: How to call .ajaxStart() on specific ajax calls

Answer 5

Używaj ajaxSend i ajaxComplete, jeśli chcesz sprawdzić zapytanie przed podjęciem decyzji, co zrobić. Zobacz moją odpowiedź tutaj: https://stackoverflow.com/a/15763341/117268

Answer 6

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

Wystarczy przejść przez ten przykład masz jakieś idea.When użytkownik kliknie element z klasą lokalny i żądania Ajax jest wysyłany, wyświetlany jest komunikat dziennika.

Answer 7

Mam rozwiązanie. Ustawiam globalną zmienną js o nazwie Showloader (domyślnie ustawioną jako false). W dowolnej z funkcji, które chcesz pokazać programowi ładującemu, ustaw go na wartość true, zanim wykonasz wywołanie ajax.

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

Następnie mam następujące w mojej sekcji głowy;

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

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

Answer 8

użycie beforeSend lub kompletne funkcje wywołania zwrotnego w wywołaniu ajax jak ten sposób ..... żywo Przykładem jest tutaj https://stackoverflow.com/a/34940340/5361795

Źródło ShoutingCode

Answer 9

Stosować lokalne scoped Ajax Wydarzenia

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

Answer 10

W obiekcie opcji znajduje się atrybut .ajax() przyjmuje globalną nazwę.

Jeśli ustawiona na wartość false, nie wywoła zdarzenia ajaxStart dla wywołania.

$.ajax({ 
     url: "google.com", 
     type: "GET", 
     dataType: "json", 
     cache: false, 
     global: false, 
     success: function (data) {