Beiträge von Bodaggnmo

Vielen Dank für deine ganze Hilfe. Werd mich mal da einlesen und versuchen das umzusetzen.

Naja finden tut er alles. Steht auch drin, wie ich im Quellcode sehen kann. Nur ist es ausgeblendet.

Nachdem das Javascript aber eh Probleme mit verschiedenen Browsern macht, bin ich am überlegen ob ich rein mit php und html sowas schaffen kann, wie bei deinem Post wo du mir das Skript gezeigt hast. Mit Mehr anzeigen und Weniger anzeigen..

Tatsache, bei Google Chrome funktionierts!

Jedoch trotz meiner Freude gerade, muss ich feststellen, dass jetzt ähnlich wie zu Beginn, nur beim ersten Eintrag die Sache funktioniert. Ab Eintrag 2 in der Ergebnisliste werden diesmal alle Tabs auch wieder angezeigt .. Beim w3 Skript vom Anfang wurde ja ab Eintrag 2 gar nichts mehr in die Tabs geladen, und jetzt wird alles wie beim Edge einfach ab Eintrag zwei komplett angezeigt..

Ich schätz mal das script wird nur einmal richtig ausgeführt, und danach beachtet er das nicht mehr. Vl brauch ich da irgendeine Schleife drum rum.. aber abgesehen davon muss ich das hinbekommen, dass es browserunabhängig funktioniert..

Puh, da frägst mich jetzt was. Bin ganz normal über Microsoft edge in der Arbeit drin. Wo finde ich das heraus?

Bei mir werden leider auch auf Codepen alle 3 Tabs direkt angezeigt. Hab das mal gescreenshottet. Die Tab Buttons sind auch hier ohne Funktion.

Hatte die ID vorhin geändert, nachdem du mir den Tipp gegeben hast, dass es vl nicht gematched wird. Hab wieder alles zu tab1 tab2 tab3 geändert. Bringt aber auch nichts.

?>

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

<?php

echo'

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

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

<tr>

<td style="vertical-align:middle"><p title= "'.$lang_modal_second_approver_title.'">'.$lang_modal_second_approver.': '.$second_approver_wt_lang.'</p></td>

</tr>

<tr>

<td style="vertical-align:middle"><p title= "'.$lang_modal_second_approver_nwt_title.'">'.$lang_modal_second_approver_nwt.': '.$second_approver_nwt_lang.'</p></td>

</tr>

<tr>

<td style="vertical-align:middle"><p>'.$lang_modal_document_type.': '.$doc_type_eb.'</p></td>

</tr>

<tr>

<td style="vertical-align:middle"><p title="'.$lang_modal_document_contact_title.'">'.$lang_modal_document_contact.': <br> '.$doc_contact.'</p></td>

</tr>

<tr>

<td style="vertical-align:middle"><p>'.$lang_modal_content_origin.': '.$line['content_origin_'.$lang].'</p></td>

</tr>

</table>

</td>

<td width ="900">

<table style="float:left;">

<tr>

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

</tr>

<tr>

<td>'.addslashes($evidence_q_question).'</td>

</tr>

</table>

</td>

<td width ="900">

<table style="float:left;">

<tr>

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

</tr>

<tr>

<td>'.$line[$peptype.'_evidence_tailoring_relevance_'.$lang].'</td>

</tr>

</table>

</tr>

</table>

</div>';

und ganz unten endet die Datei dann so:

?>

<script>
var _buttons = document.querySelectorAll( 'button.tablink' );

_buttons.forEach( (i) => {

i.addEventListener('click', (e) => {

e.preventDefault();

_buttons.forEach( (t) => {
document.getElementById( t.dataset.tab ).style.display = 'none';
t.classList.remove('w3-green');
});

document.getElementById( i.dataset.tab ).style.display = 'block';
i.classList.add( 'w3-green' );
});

});

_buttons[0].click();

</script>

</body>

</html>

<div id="standard" class="w3-container">

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

<tr>

<td colspan ="2">

</td>

</tr>

<tr>

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

</tr>

<tr>

');

// Hier für Fallunterscheidung ob spezifischer Milestone gewählt oder "all"

if($milestone=="all"){

echo '<td colspan="3" style="vertical-align:middle"><p title= "'.$lang_modal_auto_standard_doc_title_2.'">'.$line['automotive_standard_document_'.$peptype.'_'.$lang].'</p></td>';

}

else {

echo '<td colspan="3" style="vertical-align:middle"><p title= "'.$lang_modal_auto_standard_doc_title_2.'">'.$line[$peptype.'_standard_document_'.$milestone.'_'.$lang].'</p></td>';

}

printf('

</tr>

<tr>

');

printf('

</tr>

</table>

</div>

ich muss da ja auch immer wieder auf Variablen aus PHP zugreifen.. das ist jetzt mal ein div, hab die ids jetzt mal geändert aber ändert sich nichts

Und das Script hab ich jetzt ganz unten eingebaut.

Naja die ganze Datei heißt result.php und über echo oder printf(' komm ich aus einer php Datei ja in html rein.

Habe das Script jetzt direkt unter die Buttons eingefügt:

?>

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

<script>
var _buttons = document.querySelectorAll( 'button.tablink' );

_buttons.forEach( (i) => {

i.addEventListener('click', (e) => {

e.preventDefault();

_buttons.forEach( (t) => {
document.getElementById( t.dataset.tab ).style.display = 'none';
t.classList.remove('w3-green');
});

document.getElementById( i.dataset.tab ).style.display = 'block';
i.classList.add( 'w3-green' );
});

});

_buttons[0].click();

</script>

<?php

print f('

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

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

<div id="tab3" class="w3-container">..

und darunter sind die 1. Zeilen der verschiedenen Tabs..

Danke für deine Mühe. Habe die Änderungen übernommen:

<script>

var _buttons = document.querySelectorAll( 'button.tablink' );

_buttons.forEach( (i) => {

i.addEventListener('click', (e) => {

e.preventDefault();

_buttons.forEach( (t) => {
document.getElementById( t.dataset.tab ).style.display = 'none';
t.classList.remove('w3-green');
});

document.getElementById( i.dataset.tab ).style.display = 'block';
i.classList.add( 'w3-green' );
});

});

_buttons[0].click();

</script>

<button class="tablink w3-bar-item w3-button w3-hover-gray" data-tab="tab1"><?php echo $lang_modal_button_tab_1; ?></button>

<button class="tablink w3-bar-item w3-button w3-hover-gray" data-tab="tab2"><?php echo $lang_modal_button_tab_2; ?></button>
<button class="tablink w3-bar-item w3-button w3-hover-gray" data-tab="tab3"><?php echo $lang_modal_button_tab_3; ?></button>

So stehts jetzt bei mir im Code. Ist das richtig? Oder war ich hier wieder zu dumm?

Bei mir werden alle 3 Tabinhalte angezeigt, die Buttons oben sind ohne Funktion -.-

Ja mit hab ich 1:1 kopiert. Hab bei den verschiedenen Tabs dann bei class des City weggenommen. So sieht der Code für einen Tab jetzt aus:

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

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

<tr>

<td colspan ="2">

</td>

</tr>

<tr>

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

</tr>

<tr>

');

// Hier für Fallunterscheidung ob spezifischer Milestone gewählt oder "all"

if($milestone=="all"){

echo '<td colspan="3" style="vertical-align:middle"><p title= "'.$lang_modal_auto_standard_doc_title_2.'">'.$line['automotive_standard_document_'.$peptype.'_'.$lang].'</p></td>';

}

else {

echo '<td colspan="3" style="vertical-align:middle"><p title= "'.$lang_modal_auto_standard_doc_title_2.'">'.$line[$peptype.'_standard_document_'.$milestone.'_'.$lang].'</p></td>';

}

printf('

</tr>

<tr>

');

printf('

</tr>

</table>

</div>

Okay danke. naja dann ists so wie ich vorher geschrieben habe. Leider ohne Funktion der Tabs.. Danke schon mal für deine/eure Mühe hier mir zu helfen.

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?

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

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?

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?

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

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

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

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