Beiträge von Bodaggnmo

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

    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.

    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>


    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?

    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?

    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

    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