Tabs dynamisch einbinden

Thema wurde von Steffen (indiv-style.de), 4. Juli 2016 erstellt.

  1. Steffen (indiv-style.de)

    Steffen (indiv-style.de) G-WARD 2013/14/15/16

    Registriert seit:
    30. Juni 2011
    Beiträge:
    5.139
    Danke erhalten:
    1.461
    Danke vergeben:
    448
    Beruf:
    Systemadmin, Webentwickler bei Reifen24.de
    Ort:
    PhpStorm
    Wenn ich Tabs ins Templates HoneyGrid bauen will, nutzt man ja das data-gambio-widget="tabs". Werden aber die Inhalte der <ul> uns des divs "<div class='tab-content'>" dynamisch mit "$(selector).html(content)" (BEISPIEL!!!) geladen, funktionieren die Tabs nicht! Bein Standart-Bootstrap ging das! Wie wird das aber hier funktionieren????
     
  2. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    16. Januar 2016
    Beiträge:
    656
    Danke erhalten:
    112
    Danke vergeben:
    20
    Weiß nicht ob ich dich richtig verstanden habe, aber die Angabe über Tabs landen in der Datenbank "products_description" z.B. so:

    Lorem Ipsum....[TAB:Footext]Foo...[TAB:Bartext]Bar...[TAB:Baztext]Baz...
     
  3. Steffen (indiv-style.de)

    Steffen (indiv-style.de) G-WARD 2013/14/15/16

    Registriert seit:
    30. Juni 2011
    Beiträge:
    5.139
    Danke erhalten:
    1.461
    Danke vergeben:
    448
    Beruf:
    Systemadmin, Webentwickler bei Reifen24.de
    Ort:
    PhpStorm
    Neee, das meine ich nicht! Ich habe Tabs in meinem Felgenkonfigurator, dort gibts Tabs für Felgengrösse, Farbe, Hersteller usw. Allerdings unterscheiden sich die Inhalten ja von Fahrzeug zu Fahrzeug gravierend, so das ich die Inhalte bzw. die Deklaration der Tabs immer erst dann generriere wenn das Fahrzeug ausgewählt ist und lade diese dynamisch in einen dafür vorhandenen DIV. Beim Standart-Bootstrap funktionieren diese wunderbar nur eben nicht im Honeygrid!
     
  4. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    16. Januar 2016
    Beiträge:
    656
    Danke erhalten:
    112
    Danke vergeben:
    20
    Was genau meinst du dann mit "funktionieren nicht"?

    Werden die einzelnen Tabs nicht angezeigt oder ist kein Inhalt hinter den Tabs vorhanden?


    EDIT: War eben auf der (Link nur für registrierte Nutzer sichtbar.) aber das sind doch keine Tabs im eigentlichen Sinne oder täusche ich mich? :)
     
  5. Steffen (indiv-style.de)

    Steffen (indiv-style.de) G-WARD 2013/14/15/16

    Registriert seit:
    30. Juni 2011
    Beiträge:
    5.139
    Danke erhalten:
    1.461
    Danke vergeben:
    448
    Beruf:
    Systemadmin, Webentwickler bei Reifen24.de
    Ort:
    PhpStorm
    Beim Klick auf die Tabs passiert nichts! Der Inhalt wird nicht gewechselt. Klick ich auf Grösse, sollte der Inhalt der Grösse erscheinen... tut er aber nicht. Das heist die Tabs sind ohne Funktion! Ich habe bei der jetzigen reifen24.de im Konfigurator bootstrap selbst eingebunden und da funktioniert das wunderbar. Auch wenn ich beim Honeygrid die Tabs fest ins Templates mache geht alles sehr gut nur eben nicht wenn die Tabs dynamisch erstellt werden und eigentlich erst nach dem Laden der Seite dort implementiert werden. Das ist aber eine ganz wichtige Funktion und ich wollte eigentlich alles vom Standart nutzen um nicht wieder zu viel eigenes reinzutackern.
     
  6. Alexandros (Gambio)

    Alexandros (Gambio) Administrator
    Mitarbeiter

    Registriert seit:
    11. November 2014
    Beiträge:
    4
    Danke erhalten:
    1
    Hallo Steffen,

    Honeygrid benutzt unsere Homemade JS Engine die jedes Modul einmal pro Page Load initialisiert. Wenn du danach neue Tabs hinzufügen willst, musst du das Widget wieder neu initialisieren. Das funktioniert wie folgt:

    $parentContainer.html('dynamic tabs html ...').attr('data-gambio-widget', 'tabs');
    gambio.widgets.init($parentContainer);

    So initialisierst du die "Widgets" Collection aus dem Gambio Namespace.
    https://developers.gambio.de/docs/3.0.0.0/jsdoc/index.html

    Das gleiche gilt für jeden Modul-Typ (controllers, extensions, compatibility). Wir werden noch einen Eintrag für dynamische Modul-Initialisierung in die Doku schreiben.

    LG Alex
     
  7. Steffen (indiv-style.de)

    Steffen (indiv-style.de) G-WARD 2013/14/15/16

    Registriert seit:
    30. Juni 2011
    Beiträge:
    5.139
    Danke erhalten:
    1.461
    Danke vergeben:
    448
    Beruf:
    Systemadmin, Webentwickler bei Reifen24.de
    Ort:
    PhpStorm
    So, das Ganze funktioniert jetzt! Ich hatte allerdings das Problemchen das beim dynamischen befüllen mit $("#space_rim").html(data); die oben genannte Aktualisierung der Widgets ins leere gelaufen ist, da die DOM-Manipulation noch nicht fertig war.

    Nun gibts bei $().html nicht wie bei anderen Functionen, keine echte callback-Function. Aber mit:

    $("#filter22").html(\'' . $meinefel2 . '\').promise().done(function(){
    $(\'#filter22\').attr(\'data-gambio-widget\', \'tabs\');
    window.gambio.widgets.init($(\'#filter22\'));
    });

    funktioniert das nun richtig!!! Danke für den Tip! :)