annuleer de klik van de huidige gebeurtenis en de ajax-oproep als er op een andere knop wordt gedrukt

Mijn probleem is dat als ik op een knop klik en de ajax nog niet is teruggekeerd en ik op een andere knop (of dezelfde knop) klik, dan krijg ik uiteindelijk twee tabellen op het scherm in plaats van één.

Scenario: Ik bouw een formulier en presenteer een reeks opties op basis van vervolgkeuzemenu's. Combo's jaar/make/model brengen een aantal productlijnen terug - Tapijten/Bumpers/Vloermatten/Geluidsdenkers enz. Elk van deze wordt een knop en wanneer ingedrukt, worden de producten voor die productlijn teruggebracht.

De producten worden vervolgens doorgelust en ik maak een tabel via JavaScript om ze weer te geven. Als ik eenmaal op een knop druk en wacht tot de tafel wordt weergegeven, is alles goed. Als ik een andere productlijn kies, wordt de productentabel verwijderd en retourneert de ajax-aanroep de nieuwe producten en bouwt ze opnieuw op in een tabel via javascript. Het probleem dat ik krijg is wanneer er op dezelfde knop of op een andere productlijnknop wordt geklikt voordat een tabel wordt gemaakt vanaf de eerste klik krijg ik twee tabellen te zien.

0
Elke kans om de code die je hebt op te nemen .... HTML/JS
toegevoegd de auteur ManseUK, de bron

3 antwoord

Without really understanding your question due to is vague nature I can only really suggest looking at the following -> the jQuery AJAX Global events

Specifically the .ajaxStart() and .ajaxComplete() methods you could use these to disable buttons with the same class on ajaxStart - then re-enable them on ajaxComplete

Voorbeeld:

$(document).ajaxStart(function(){ 
  $('.buttonsclass').attr('disabled','disabled');; 
}).ajaxComplete(function(){ 
  $('.buttonsclass').removeAttr('disabled');
});
2
toegevoegd
Dit is de juiste methode. Of als u zin ​​krijgt, kunt u de knop verbergen en een div weergeven met een laadindicator voor ajax.
toegevoegd de auteur Chris Sobolewski, de bron

U kunt de vorige ajax-aanvraag afbreken met behulp van de methode abort() van het xhr-object. Probeer dit

$(document).ready(
     var  xhr = $.ajax({
            url: 'url',
            success: function(data) {
                //do something
            }
        });
    };

    //If you want to abort this call on some condition just do this
    xhr.abort();
);
1
toegevoegd
Dat is hetzelfde als een crosswalk-knop hebben om de timer te resetten naar "light change" elke keer dat je op de knop drukt ...
toegevoegd de auteur Sinetheta, de bron

U kunt .one() gebruiken om een ​​handler voor enkele klik te binden en vervolgens opnieuw binden wanneer uw ajax is voltooid . Een beetje minder werk dan het in- en uitschakelen.

function clickhandler(){
  //your button actions
}

//the doc ready bind
$(yourButton).bind('click',clickhandler);

$.ajax({
    url:'your url',
    complete : function(){
        //rebind it when it's safe to do so again
        $(yourButton).bind('click',clickhandler);
    }
});
0
toegevoegd