Home → Contao →

Fehler: Tab-Navigation: Probleme bei Einbau eines Formulars

• Edit

Gerhard

13 Aug, 2017 06:09 PM

Produkt: Oneo Contao
Contao-Version: 3.5.28
Browser und Browserversionen: Chrome aktuell

Sehr geehrte Damen und Herren,

Fehler 1:
Wenn man innerhalb einer mehrseitigen Tab-Navigation ein Formular platziert und dort z.B. auf Tab 3 ein Fehler auftritt kommt man nicht zurück in den Tab.
Man hat man überhaupt keine Möglichkeit in den Tab zu springen. Selbst die Angabe des Sprungziels (#) im Action-Attribut des Formulars genügt nicht, um zum richtigen Tab zu springen.
Auch wenn man die URL manipuliert, kann man nicht auf den Tab gelangen.

Fehler 2:
Öffnet man ein Formular z.B. in Tab 3, dann gelangt man nach dem Neuladen der Seite wieder in den Tab 1, man bleibt nicht in Tab 3.

Siehe Screenshots

Wäre schön, wenn Sie den Bug finden würden.

Mit freundlichen Grüßen,

Gerhard Hoffmann

• Bildschirmfoto_2017-08-13_um_20.07.18.png 85.1 KB
• Bildschirmfoto_2017-08-13_um_20.07.03.png 286 KB

1. Support Staff 1 Posted by RockSolid Theme... on 14 Aug, 2017 09:09 AM

   

   Vielen Dank für Ihre Nachricht.

   Dass beim neuen Laden der Seite oder beim Absenden eines Formulars die Tabs nicht geöffnet bleiben ist das normale Verhalten des Tab-Skripts.

   Sie können jedoch per JavaScript auf einen gewünschten Tab springen. Der Code dafür könnte z. B. folgendermaßen aussehen:

   function triggerEvent(element, eventName) {
       var evt = document.createEvent('HTMLEvents');
       evt.initEvent(eventName, true, true);
       element.dispatchEvent(evt);
   }
   triggerEvent(
       document.querySelector('.tab-navigation li:nth-child(3) > a'),
       'click'
   );
   

   • Edit

2. 2 Posted by Gerhard on 14 Aug, 2017 10:32 AM

   

   Hallo,
   vielen Dank für den Tipp. So ganz geht es noch nicht.

   Wir haben es mal ausprobiert und unter Seitenlayout unter "Eigener Javascript-Code" eingebunden und nun ergibt sich die merkwürdige Situation, dass einfach immer der 3. Tab aktiv ist, sofern 3 Tabs vorhanden sind.

   Das heisst, aktiviere ich ein Formular im ersten oder zweiten Tab, lande ich immer im 3Tab.
   Habt Ihr eine Idee, wie man das in den Griff bekommt?

   Viele Grüße,

   Gerhard

   • Edit

3. Support Staff 3 Posted by RockSolid Theme... on 14 Aug, 2017 02:43 PM

   

   Der angeführte Code ist ein Beispiel dafür wie der dritte Tab per JavaScript aktiviert werden kann, der CSS-Selektor :nth-child(3) spricht dabei den dritten Tab an. Der JavaScript-Code sollte entsprechend Ihren Anwendungsfällen angepasst werden.

   Sollten Sie Unterstützung bei der Anpassung benötigen, stehen Ihnen unsere Partner gerne zur Verfügung. Eine Auswahl an Agenturen und Freelancer finden Sie in unserem Partnernetzwerk: https://rocksolidthemes.com/de/contao/service/agenturen

   • Edit

4. 4 Posted by Gerhard on 17 Aug, 2017 02:18 PM

   

   Hallo,

   unser Entwickler hat einiges probiert und er sagt dazu:

   Es gibt nur eine "Lösung": Einbindung ins Seitenlayout.
   Das ist aber keine Lösung, weil man da gar keine PHP-Abfrage machen kann -_-
   Von daher kann ich nur grundsätzlich sagen, dass Tab2 oder Tab3 oder TabX offen sein sollen - und das bringt mir nicht viel. Dann ist der Tab immer offen - egal ob der User vorher ein Formular in diesem Tab ausgefüllt hat oder in einem anderen.
   So wie es aussieht, könnte es sich doch um einen Bug handeln, da es bei den jQuery-Tabs auch funktioniert, dass man direkt drauf springen kann.
   Abgesehen davon hat man ein Problem, falls man mehrere Tab-Situationen auf der Seite hat.
   Das Problem muss dynamisch gelöst werden. Wenn ich auf #video springen will, muss dieser Tab danach auch offen sein!!! Das gelieferte Script ist daher so nicht verwendbar.

   Haben Sie dazu noch eine andere Lösung?

   Viele Grüße,

   Gerhard Hoffmann

   • Edit

5. Support Staff 5 Posted by RockSolid Theme... on 18 Aug, 2017 04:24 AM

   

   So wie es aussieht, könnte es sich doch um einen Bug handeln, da es bei den jQuery-Tabs auch funktioniert, dass man direkt drauf springen kann.

   Automatisch auf einen Tab zu springen über ein Sprungziel (#) in der URL wird von den Tabs in Oneo nicht unterstützt.

   Das gelieferte Script ist daher so nicht verwendbar.

   Das gelieferte Skript war ein Beispiel dafür wie man auf einen bestimmten Tab springen kann.

   Um auf den Tab zu wechseln der als Sprungziel in der URL steht könnte das Skript z. B. folgendermaßen aussehen:

   (function(){
       function triggerEvent(element, eventName) {
           var evt = document.createEvent('HTMLEvents');
           evt.initEvent(eventName, true, true);
           element.dispatchEvent(evt);
       }
       var link = document.querySelector('.tab-navigation a[href$="'+document.location.hash+'"]');
       if (link) {
           triggerEvent(link, 'click');
       }
   })();
   

   • Edit

6. 6 Posted by jan.kout on 28 Jan, 2021 08:51 AM

   

   Leider funktioniert der da erwähnte Code nicht. Siehe https://dev.hotelotto.com/de/zimmer Versuchen Sie bitte unter Zimmer einen der Links anzuklicken, um zu sehen, wie sich das verhält.

   • Edit

7. Support Staff 7 Posted by RockSolid Theme... on 29 Jan, 2021 07:59 AM

   

   Sie haben das Skript anscheinend im Head-Bereich der Website eingebunden. Es muss jedoch ausgeführt werden sobald Jemand auf den Link klickt der den Tab öffnen soll.

   • Edit

8. 8 Posted by jan.kout on 29 Jan, 2021 09:26 AM

   

   Hallo,

   das ist klar. Die Frage ist, wo der Code sein muss und was ich da ändern soll? Sagen wir mal, wenn ich einen der Anchorn-Links der .header-navigation anklicke, muss ich diese für dieses Element irgendwo in Ihrem Code erwähnen?

   • Edit

9. 9 Posted by jan.kout on 31 Jan, 2021 10:00 PM

   

   Über eine mehr erklärende Antwort würde ich mich freuen. :-)

   Schon jetzt danke ich Ihnen für Ihre Antwort und wünsche Ihnen noch einen schönen Tag.

   • Edit

10. Support Staff 10 Posted by RockSolid Theme... on 01 Feb, 2021 11:26 AM

    

    Weitere Informationen dazu finden Sie in folgendem Beitrag: https://help.rocksolidthemes.com/discussions/contao/64058#comment_49006298

    • Edit