Details von Ergebnissen aus Array als tabbed Modals

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

  • Also ich habe mein Beispiel mal getestet.

    Da muss einfach nur in den Zeilen 16 und 17 das this gegen i ausgetauscht werden, mein Fehler.


    Weiterhin muss die Zeile 2 ans Ende gestellt werden, da das Ereignis in Zeile 2 noch gar nicht definiert ist.


    Mit den kleinen Änderungen funktioniert das bei mir.

    Hättest Du aber auch drauf kommen können, wenn Du das Browser-Entwicklerwerkzeug verwendest!

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

  • Na ich hoffe mal, dass grundsätzlich das Load-Event genutzt wird?!

    Falls nicht, JavaScript im Head-Bereich immer in so was hüllen:

    Code
    document.addEventListener('DOMContentLoaded', function() {
    
        // here comes the script
    
    });

    Scripte in den Footer zu legen ist nur für bestimmte Erweiterungen/Tracker notwendig.

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

  • Genau das war gemeint: Das Script steht immer noch vor den Content-DIVs, kann diese also nicht matchen und somit nicht ausblenden.

    Mir scheint der Kontextwechsel auch stark contra EVA zu sein. Warum gibst Du das Script als HTML aus und die <div>s per printf() über PHP?

    Trenne HTML von PHP.

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

  • Ich sehe da kein id="tab1"!


    Und Dein echo/printf-Salat macht keinen Sinn.

    Das f bei printf() steht für format/formatted, was Du absolut gar nicht nutzt. Ein simples echo reicht stattdessen vollkommen.


    Mal als kleines Beispiel, wie das nach EVA aussehen könnte:

    Jetzt darfst Du entscheiden, was für Dich übersichtlicher ist, von der Verarbeitung jedenfalls ist diese Variante sinnvoller.

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

  • Denn nimm mal einen anderen Browser. M$ hat glaube ich im Edge auch gern eigene Filter drin.

    Auf der Arbeit kann es natürlich auch sein, dass die Administration da was sperrt.


    Wäre aber ein schönes Beispiel, warum man sich auch heutzutage nicht auf JavaScript verlassen sollte!

    Meine nicht Dich speziell damit, aber weil es oft Diskussionen gibt, dass manche meinen JavaScript würde überall laufen...

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!