Beiträge von Bodaggnmo

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

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

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

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