Details von Ergebnissen aus Array als tabbed Modals

  • Hallo zusammen,


    ich arbeite an einer Internetseite die aus einer SQL Datenbank eine Ergebnisliste (sieht aus wie Tabelle) dynamisch je nach Nutzereingabe erzeugt.

    Auf die einzelnen Ergebnisse kann man klicken, und dadurch öffnet sich ein Modal. Da in diesem Modal immer mehr Einträge dazu kommen und es langsam unübersichtlich wird, wollte ich Tabs in das Modal einbauen. Hierzu habe ich auf w3schools eine Lösung gefunden. Jedoch funktioniert das Javascript nur bei dem ersten Ergebnis in der Ergebnisliste. Sobald ich auf das zweite klicke, wird in den Tabs nichts angezeigt. Bei der Untersuchung des Quellcodes habe ich festgestellt. dass nur beim aller erster Ergebnis im Modal style="display: block" von Tab zu Tab wandert und dies so anzeigt. Bei allen anderen Ergebnissen bleibt Display auf None.


    Hier mal die relevanten Codeteile:


    <div class="w3-bar w3-border-bottom">

    <button class="tablink w3-bar-item w3-button w3-hover-gray" onclick="openCity(event, 'tab1')"><?php echo $lang_modal_button_tab_1; ?></button>

    <button class="tablink w3-bar-item w3-button w3-hover-gray" onclick="openCity(event, 'tab2') "><?php echo $lang_modal_button_tab_2; ?></button>

    <button class="tablink w3-bar-item w3-button w3-hover-gray" onclick="openCity(event, 'tab3') "><?php echo $lang_modal_button_tab_3; ?></button>

    </div>


    <div id="tab1" class="w3-container city">

    <table border="0">

    <tr>

    <td width ="700">

    <table style="float:left;">

    <tr>

    <th width="900" style="text-align:center" bgcolor="#f4f6f7">'.$lang_modal_details.'</th>

    </tr>

    <tr>

    <td style="vertical-align:middle"><p title="'.$lang_modal_first_approver_title.'">'.$lang_modal_first_approver.': '.$first_approver.'</p></td>

    </tr>

    </table>

    </div>


    <div id="tab2" class="w3-container city">

    <table border="0" width="900"

    <tr>

    <td colspan ="2">

    </td>

    </tr>

    <tr>

    <th colspan ="3" style="text-align:center" bgcolor="#f4f6f7">'.$lang_modal_additional_appl_docs_title.'</th>

    </tr>

    <tr>

    <th colspan ="3" style="text-align:center">'.$lang_modal_templates_title.'</th>

    </tr>

    <tr>

    ... und so weiter. Die Variablen zielen auf Werte in der Datenbank ab. Die richtigen Daten werden auch geladen, jedoch eben nur im ersten Ergebnis angezeigt. Sobald ich das Modal schließe und ein neues Ergebnis anschauen möchte werden die Daten eben nicht angezeigt.


    die Javascript Funktion:

    <script>

    document.getElementsByClassName("tablink")[0].click();

    function openCity(evt, cityName) {

    var i, x, tablinks;

    x = document.getElementsByClassName("city");

    for (i = 0; i < x.length; i++) {

    x[i].style.display = "none";

    }

    tablinks = document.getElementsByClassName("tablink");

    for (i = 0; i < x.length; i++) {

    tablinks[i].classList.remove("w3-green");

    }

    document.getElementById(cityName).style.display = "block";

    evt.currentTarget.classList.add("w3-green");

    }

    </script>

    Die grundsätzliche Seite ist eine php Seite. Ich habe schon festgestellt, dass ich komischerweise die Buttons außerhalb des phps programmieren muss.

    Ich habe leider nichts finden können, wie ich den Code anpassen muss, damit nicht nur beim ersten Ergebnis die Tabs mit Daten gefüllt werden,

    sondern auch bei allen weiteren. Dort bleibt wie gesagt Display style auf None und somit stehen keine Daten darunter.


    Vielen Dank für Eure Hilfe


  • wenn ich dich richtig verstanden habe versuche es mal damit . https://developer.mozilla.org/…PI/Document/querySelector



    oder bei document.getElementsByClassName("tablink")[0] die Zahlen austauschen . die 0 ist das erste Element auf der Seite mit den Classnamen die 1 das Zweite und so weiter. Falsch ich dich falsch verstanden habe dann vergiss den Beitrag . Aber der Link ist besser mit querySelector kann man gleich allle ansprechen

  • Danke für deine schnelle Antwort. Ich glaube ich hab mich falsch ausgedrückt.


    Die 3 Tabs werden immer angezeigt, egal welches Ergebnis ich aus der Liste auswähl. Also im Modal sind die 3 Tabs sichtbar, nur die Daten darunter sind außer beim ersten Ergebnis im Modal alle ausgeblendet. Bei der Untersuchung des Quellcodes wechseln nämlich style Display nur beim ersten Ergebnis von tab1-tab3 zu block und bei den anderen Ergebnissen bleibt das auf Display None.

    Bei den Ergebnissen, wo die Daten sind angezeigt werden, kann man aber im Quellcode sehen, dass er die richtigen Daten aus der SQL Datenbank gezogen hat, jedoch nur den Display style nicht anpasst, also von None zu block..

  • olaf2500 Das sind auch nur die Tablinks, also die Überschriften auf den Tabs. Die werden auch alle angezeigt egal bei welchem Ergebnis. Wirklich gut kenne ich mich auch nicht aus, da ich leider nie programmieren gelernt hab und seit 3 Monaten die Seite mithilfe von Tutorials und learning by doing aufgebaut hab. Die Funktion stammt von w3 Schools, da wird das tabbed modal aber nur einmal aufgebaut, und nicht öfters. Und ich erhalte ja als Grundlage ein dymanisches Array mit Ergebnissen aufgrund der Userauswahl.

    Und wie gesagt, die Daten werden ja geladen, was man am Quellcode sehen kann, nur das Display für die Daten also meiner Meinung nach in diesem Teil:

    document.getElementById(cityName).style.display = "block";

    evt.currentTarget.classList.add("w3-green");

    }

    .. bleibt ab Ergebnis zwei auf None und wechselt nicht zu block

  • Wenn ich die Schleife entferne, werden alle Inhalte aus den 3 Tabs im ersten abgezeigt. Die stehen dann auch bei allen Ergebnissen. Auch mit den richtigen Daten. Nur dann eben alle Informationen auf der 1. Seite, und das muss ich ja eben abschaffen, da das zu viel ist. Auch die Tabs sind oben noch sichtbar, jedoch passiert nichts mehr wenn ich es anklicke. Also irgendwas stimmt schon scheinbar nicht an der Schleife.. nur was ist die Frage..

  • Bei dem Ergebnisarray habe ich auch eine Funktion, damit man die liste sortieren kann. Wenn ich die Liste sortiere und dann ein anderer Eintrag auf Position 1 steht, funktioniert für dieses auch wieder alles einwandfrei. Nur eben auch hier nur das jeweils 1. Ergebnis der Liste wird im Modal mit allen 3 Tabs und vollen Daten angezeigt. Ab Ergebnis zwei sind im Modal nur die Tabs zu sehen ohne Daten. Auch hier stehen im Quellcode die richtigen Daten mit Display none

  • Mitlerweile weiß ch was du meinst.

    Hast du das schon online? Wo man sich das mal genauer ankucken kann?


    Ps: In-linestyle ist auch nicht mehr in und bgcolor="#f4f6f7" nutzt man eigentlich auch nicht mehr.Aber das hat jetzt mit dein Fehler nix zu tun.

  • https://codepen.io/Bodaggnmo/pen/wXQMpy


    Das ist ein riesen Code. Zum Verständnis des codes :

    Die Seite ist aus 3 php Skripten aufgebaut, weil die User die Möglichkeit haben einmal über eine Bilderauswahl Ergebnisse zu Filtern, und über daneben liegende Dropdowns.


    Danke für deine Hilfe!


    PS.: Der Code ist alles andere als schön und sauber. Wir sind 3 Leute die vorher noch nie etwas mit coding zu tun hatten, und haben dieses Projekt angefangen und einen Code erstellt, der zumindest funktioniert. Für einen gelernten Programmierer schaut das was wir da gemacht haben vermutlich aus wie Kraut und Rüben :D

  • Aso okay. Also wie gesagt, ich wollte hier auf keinen Fall irgendein Portal "missbrauchen". Ich merks mir für die Zukunft.


    Aber falls du dich auskennst, könntest du dir das Thema mal anschauen? Also den Code in Codepen brauchst nicht durchlesen, nur die Codeteile anschauen die ich hier gepostet habe?

  • Nur mal kurz drüber geschaut. Ich würde das ändern.


    Die <button> Elemente würde ich mit einem data-Attribut versehen, anstelle des onclick-Attribut:

    PHP
    1. <button class="tablink w3-bar-item w3-button w3-hover-gray" data-tab="tab1"><?php echo $lang_modal_button_tab_1; ?></button>
    2. <button class="tablink w3-bar-item w3-button w3-hover-gray" data-tab="tab2"><?php echo $lang_modal_button_tab_2; ?></button>
    3. <button class="tablink w3-bar-item w3-button w3-hover-gray" data-tab="tab3"><?php echo $lang_modal_button_tab_3; ?></button>

    Dann sollte so was in der Art vollkommen ausreichen:

    Ist allerdings ungetestet, sollte aber so in etwa passen

  • Vielen Dank.

    Ist der Code den du geschrieben hast ein fertiges Skript, dass ich ganz unten einfügen kann? Wenn ja, dann hab ich das gerade probiert. Jetzt wird im Modal von jedem Nachweis den man auswählen kann in der Ergebnisliste alle Tabs auf einmal angezeigt. Die Buttons oben bleiben ohne Funktion. Mir ist durchaus bewusst, dass mir hier niemand einen fertigen Code anfertigen wird, nur weiß ich gerade nicht ob ich da noch was verändern muss oder ob ich den Code von dir einfach so ins <script> tag schreiben kann?