Ankündigung

Einklappen
Keine Ankündigung bisher.

Details von Ergebnissen aus Array als tabbed Modals

Einklappen
Dieses Thema ist geschlossen.
X
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • 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 ein Javascript, dass die 3 Tabs anzeigen und ausblenden soll. Jedoch werden im Modal immer direkt alle Tabs angezeigt und meine Buttons oben sind ohne Funktion.


    Hier mal die relevanten Codeteile:


    ?>


    <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.'">'.$la ng_modal_first_approver.': '.$first_approver.'</p></td>
    </tr>
    <tr>
    <td style="vertical-align:middle"><p title= "'.$lang_modal_second_approver_title.'">'.$lan g_mo dal_second_approver.': '.$second_approver_wt_lang.'</p></td>
    </tr>
    <tr>
    <td style="vertical-align:middle"><p title= "'.$lang_modal_second_approver_nwt_title.'">'. $lan g_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_relevanc e_title.'</th>
    </tr>
    <tr>

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

    </tr>
    </table>
    </tr>
    </table>
    </div>';

    dann folgen die 2 weiteren divs..
    am ende habe ich folgendes Script eingebaut:

    ?>

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


    Ich bin kompletter Neuling, und komme leider nicht darauf. Auf w3schools hatte ich auch einen Code gefunden, jedoch funktioniert der immer nur bei dem ersten Ergebnis aus der dynamisch erzeugten Ergebnisliste. Deswegen habe ich etwas neues probiert. Hoffentlich könnt ihr mir helfen. Vielen Dank

    Habe mittlerweile festgestellt, dass es irgendwie Browser abhängig ist. Mit der Nutzung von Microsoft Edge funktioniert das Skript gar nicht und alles wird angezeigt. Mit Mozilla Firefox funktioniert es nur bei dem ersten Eintrag in der Liste, sobald ich einen neuen Eintrag anklicken um das Modal zu öffnen wird auch alles angezeigt..


  • #2
    Der Code ist kompletter Müll. Ich würde dir raten den augenblicklich zu entsorgen.

    Kommentar


    • #3
      Also ich bin kompletter Neuling und hab das aus verschiedenen Foren und w3 Schools zusammen gebastelt. Der Wechsel von html zu php und anders rum ist nötig, weil ich auf die php Variablen zugreifen muss.
      Ich habe ehrlich gesagt mit etwas konstruktiverer Kritik gerechnet Falls du etwas hast, was mein Problem besser lösen kann, wäre ich dir sehr dankbar für deine Hilfe.

      Kommentar


      • #4
        Naja, entweder du verwendest eine fertige Komponente wie z.B.:

        https://jqueryui.com/tabs/

        oder du lernst, wie man es selber macht. Jedenfalls ist es die falsche Herangehensweise irgendeinen fremden Code zu nehmen und den dann in einem Forum zu posten, damit andere Fremde diesen gratis reparieren.

        Kommentar


        • #5
          Da ich es ja gerade am lernen bin und es eben nur über nachlesen, kopieren und nachfragen funktioniert, bin ich ja auf fremde Hilfe angewiesen. Wie ich oben auch geschrieben habe, habe ich zuerst ein Skript von w3 Schools verwendet, welches nicht geht.
          Anschließend habe ich das obige Javascript entworfen und damit hab ich eben jetzt ein Problem

          Kommentar


          • #6
            Zitat von Bodaggnmo Beitrag anzeigen
            Da ich es ja gerade am lernen bin und es eben nur über nachlesen, kopieren und nachfragen funktioniert, bin ich ja auf fremde Hilfe angewiesen. Wie ich oben auch geschrieben habe, habe ich zuerst ein Skript von w3 Schools verwendet, welches nicht geht. Anschließend habe ich das obige Javascript entworfen und damit hab ich eben jetzt ein Problem
            Na gut. Nachdem PHP für das Problem irrelevant ist, solltest du PHP-Code weg lassen. Am besten du postest ein Beispiel auf JSFiddle, bei dem das Problem nachvollziehbar auftritt.

            Kommentar


            • #7
              PHP-Code brauch ich, da die Variablen alle in php definiert sind.
              Der Code an sich funktioniert eigentlich : https://codepen.io/anon/pen/dKaLdB?editors=1010
              Jedoch auch nur in Mozilla oder Chrome, nicht in Microsoft Edge. Da ist jetzt dann eh die Frage, weil es Browser unabhängig funktionieren muss, ob ich das irgendwie im Code direkt sagen kann, oder weg von Javascript sollte? Hab schon nachgeforscht das Modal größer zu machen über "Mehr anzeigen" aber da hängt auch immer irgendein Javascript dahinter -.- Hast du ne Idee wie ich das in PHP umsetzen kann? Des fertige jquery hab ich eingebaut von oben, jedoch haut das nicht hin weil bei mir alles dynamisch aus ner Datenbank gezogen wird und nicht "fest" drinsteht.

              Kommentar


              • #8
                [MOD: geschlossen, CrossPost]
                Competence-Center -> Enjoy the Informatrix
                PHProcks!Einsteiger freundliche Tutorials

                Kommentar

                Lädt...
                X