Fehler: Tab-Navigation: Probleme bei Einbau eines Formulars

Gerhard's Avatar

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

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

    RockSolid Themes's Avatar

    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'
    );
    
  2. 2 Posted by Gerhard on 14 Aug, 2017 10:32 AM

    Gerhard's Avatar

    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

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

    RockSolid Themes's Avatar

    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

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

    Gerhard's Avatar

    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

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

    RockSolid Themes's Avatar

    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');
        }
    })();
    

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Already uploaded files

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

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac