Baba: event listener vorübergehend deaktivieren? jquery

Hallo, ich stehe gerade auf dem Schlauch. Ich würde mich sehr über Hilfe freuen.

Ein Ajaxrequest (über ein Formular getriggert, welches sich im ersten von drei Tabs befindet) benötigt im Testfall ca. 3 Sekunden, um content nachzuladen. Solange soll das Navigieren innerhalb der drei Tabs verhindert werden.

Bisheriger Ansatz:
für die Optik:

  • ich setze die Klasse des "Next Tab"-Links zu Beginn des Ajaxrequests auf tabnextdeac $("#chaintab_next").removeClass("tabnext").addClass("tabnextdeac");, und im Callback zurück $("#chaintab_next").removeClass("tabnextdeac").addClass("tabnext");
    für die Funktionalität:
  • ich setzt eine globale JS-Variable DenyChangeTab = true; zu Beginn des Ajaxrequests, welche im Callback wieder aufgelöst wird mit DenyChangeTab = false;

Optisch funktioniert es gut. Link wird grau, solange der Ajaxrequest läuft.
Nur leider: klicke ich im grauen Zustand auf Next, "merkt" sich JS das Event und switcht anschliessend, wenn Link wieder blau, zum nächsten Tab.

Listener des Tabswitch sieht so aus:

// switch tab functions (note: tabs are starting from 0 (setup-tab))  
    $('.chaintab_changetab').click(function() {  
  
      if(DenyChangeTab) return null;  
  
      var SelectedTab = null;  
      if($(this).hasClass("totab1")) SelectedTab = 1;  
      if($(this).hasClass("totab2")) SelectedTab = 2;  
      if($(this).hasClass("totab3")) SelectedTab = 3;  
      $chaintabs.tabs("select", SelectedTab); // switch to tab  
  
    });

Ich merke gerade, das es auch in der Vorgängerversion, die ohne jquery gemacht war, auch so lief. Wie kann ich den Klick aufs graue Next einfach ins Leere laufen lassen? Ajax request ist asynchron.

Vielen Dank für Eure gute Hilfe, wie immer!

Cheers,
Baba

  1. Hallo,

    warum blendest Du nicht einfach ein unsichtbares Div (a la lightbox) ein, solange der AJAX-Request läuft und blendest es wieder aus, wenn der Request beendet ist? Damit sperrst Du sämtliche Elment für einen Klick. Optional könntest Du noch eine animierte Grafik einbauen, die dem User signalisiert, dass was im Hintergrund läuft ("Ladegrafik").

    Grüße
    Siri

    1. Hallo,

      warum blendest Du nicht einfach ein unsichtbares Div (a la lightbox) ein,

      Eine Ladegraphik habe ich schon. Aber meinst Du, dass ich ein komplettes Div in den Dimensionen des Tabs darauf lege, was alle klicks abfängt? Ein Idee wärs. Momentan verändere ich nur den Mauscursor des Tabs, auf Sanduhr.

      Ich versuche es mal mit einem LAyer div.
      Vielen Dank für die Idee.

      Cheers,
      Baba