Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [ajax] onclick i seria przyciśnięć
Forum PHP.pl > Forum > XML, AJAX
miccom
Cześć.
Pytanko mam, jak rozwiązać sprawę kilkukrotnego kliknięcia elementu i wykonania tych samych zadań.

Poniższe zadanie realizuje pewną opcję.
Jeśli moje łącze z internetem jest dobre to śmiga, ale jeśli net szwankuje to mogę kliknąć kilka razy ten element za nim pierwsze zadanie się wykona i wyświetli.

  1. $('body').on('click', '.mojDiv', function() {
  2. $.ajax({
  3. type : "GET",
  4. dataType : "json",
  5. url : "kadra",
  6. }).done(function( data ) {
  7. if (data.error)
  8. {
  9. alert(data.error);
  10. }
  11. else
  12. {
  13. showActiveWindow( data.daneDoWyswietlenia, '640px', '506px',100);
  14. }
  15. });
  16. });


Jak zatrzymać wykonanie się kodu ajax do czasu wyświetlenia okna informacyjnego ( showActiveWindow ) ?
Będę wdzięczny za pomoc.
viking
Błąd połączenia to metoda fail().
miccom
Cytat(viking @ 27.01.2018, 11:48:44 ) *
Błąd połączenia to metoda fail().


Dziękuję za informację, ale mimo tego nadal można kliknąć kilka razy wink.gif i wykonać to samo zadanie kilka razy.
viking
A dlaczego miało by się nie wykonywać? Dopóki nie zdejmiesz listenera off() zdarzenie występuje na elemencie.
miccom
Czy mogę zastosować coś takiego?


  1. $('body').on('click', '.mojDiv', function() {
  2. $( ".mojDiv" ).off( "click");


sabat24
Raczej coś takiego:

  1. $('body').on('click', '.mojDiv', function(e) {
  2. var that = $(this);
  3. if (that.data('inprogress') || 0) == 1) { return false;}


Następnie dodaj
  1. .complete(function() {
  2. that.data('inprogress', 0);
  3. });

oraz
  1. .beforeSend(function() {
  2. that.data('inprogress', 1);
  3. });
  4.  
miccom
Więc składając kod do kupy tak to ma wyglądać?

  1. $('body').on('click', '.mojDiv', function(e) {
  2. var that = $(this);
  3. if (that.data('inprogress') || 0 == 1) { return false;}
  4. $.ajax({
  5. type : "GET",
  6. dataType : "json",
  7. url : "kadra",
  8. beforeSend: function() {
  9. that.data('inprogress', 1);
  10. },
  11. .done(function( data ) {
  12. that.data('inprogress', 0);
  13. if (data.error)
  14. {
  15. alert(data.error);
  16. }
  17. else
  18. {
  19. showActiveWindow( data.daneDoWyswietlenia, '640px', '506px',100);
  20. }
  21. });
  22. });
  23. });



Nie chcę mędrkować ale czy to jest poprawnie napisane?
Nawiasy się nie zgadzają
  1. if (that.data('inprogress') || 0) == 1) { return false;}
sabat24
Cytat
Nie chcę mędrkować ale czy to jest poprawnie napisane?
Nawiasy się nie zgadzają

Pisałem to z ręki. Zobacz tak:

  1. if ((that.data('inprogress') || 0) == 1) { return false;}


Co do tego fragmentu:
  1. that.data('inprogress', 0);


Musisz zarówno to obsługiwać w przypadku done oraz fail - bo jeśli otrzymasz błąd, to nie będziesz mógł znowu kliknąć, bo status się nie zresetuje.

Możesz więc to skopiować i dodać w done oraz fail albo dodać osobny status complete (albo always - nie pamiętam teraz, jak to się zwało), żeby było wykonywane za każdym razem, gdy request się wykona.
miccom
Ok, więc tak to skleciłem:

  1. $('body').on('click', '.mojDiv', function(e) {
  2. var that = $(this);
  3. if ((that.data('inprogress') || 0) == 1) { return false;}
  4. $.ajax({
  5. type : "GET",
  6. dataType : "json",
  7. url : "kadra",
  8. beforeSend: function() {
  9. that.data('inprogress', 1);
  10. },
  11.  
  12. }).done(function( data ) {
  13. that.data('inprogress', 0);
  14. if (data.error)
  15. {
  16. alert(data.error);
  17. }
  18. else
  19. {
  20. showActiveWindow( data.daneDoWyswietlenia, '640px', '506px',100);
  21. }
  22. }).fail(function (data) {
  23. that.data('inprogress', 0);
  24. alert(data.error);
  25. });
  26. });


Sprawdzisz czy dobrze ? smile.gif
sabat24
Na oko wygląda ok. Aczkolwiek dość łatwo będzie Ci to sprawdzić w praktyce, bo wystarczy, że zobaczysz w przeglądarce, czy po 2 kliknięciach nie zrobi Ci 2 requestów.
Co do fail to konstrukcja jest taka:

  1. .ajax().fail(function(jqXHR, textStatus, errorThrown){});


Nie masz data, bo nie masz odpowiedzi z serwera, gdyż był błąd. Żeby wyświetlić co się stało, zrób
  1. .fail(function(jqXHR, textStatus, errorThrown) {
  2. that.data('inprogress', 0);
  3. alert(textStatus);
  4. });
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2019 Invision Power Services, Inc.