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

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..

Danke, ich hab oben nur Codeschnipsel gepostet. Weiter unten wird das alles geschlossen. Der Code ist nur viel zu lang, dass will ich euch nicht antun.

Die Daten und tabels werden auch alle richtig geladen, irgendwie muss das echt an der Schleife liegen..

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

Ne des liegt leider nur im Intranet meiner Firma..

Ich komm da einfach nicht dahinter, warum des nur bei dem ersten Eintrag angezeigt wird, aber bei allen Einträgen die Daten, wenn auch nicht sichtbar, richtig aus der Datenbank gezogen werden

okay danke für den tipp

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

Aso okay sorry wusste ich nicht. Wie gesagt bin kompletter Programmierneuling, mit 3 Moanten online Coderecherchen :D. Konntest du das jetzt so trd anschauen, weil du meintest zukünftig?

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?

Oder hast du eine andere Idee, wie man das Problem, tabbed modals, in PHP lösen kann? Hab mittlerweile versucht mit bootstrap eine Lösung einzubauen, jedoch passt das nicht mit den ganzen Stylesheets von w3 glaub ich zusammen..

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?