in Schleife Variable setzen hochzählen und an Script übergeben

  • PHP

Es gibt 10 Antworten in diesem Thema. Der letzte Beitrag () ist von Runshak.

    in Schleife Variable setzen hochzählen und an Script übergeben

    Hallo,

    ich fülle mit PHP und einer Foreachschleife eine Tabelle aus (Daten werden aus einer Datenbank abgeholt und mit Hilfe der Item-ID in die Tabelle richtig zugeordnet)

    Beim Befüllen wird auch jedem Tabelleneintrag ein Button zugeordnet. Der Button hat eine ID, welche bei jedem button identisch ist.

    Die Funktion des Buttons wird von einem Java Script gemacht, welche auf die Button ID zugreift.

    Der Button funktioniert auch wie er soll, aber nur beim ersten Tabelleneintrag. Bei den folgenden passiert nichts.

    Liege ich mit der Vermutung richtig, dass es an der gleichen Button-ID liegt?

    Wenn ja, wie kann ich eine ID als Variable in dem ID Feld des Buttons (id="mbtn") so deklarieren, dass beim Durchlauf der Schleife diese hochgezeählt wird UND dann von dem Spript aus auf diese jeweilige Variable zugegriffen werden kann?

    PHP-Quellcode

    1. <?php
    2. foreach($_SESSION["shopping_cart"] as $keys => $values)
    3. {
    4. ?>
    5. <tr>
    6. <td><?php echo $values["item_name"]; ?></td>
    7. <td>
    8. <button class="buttonLog" id="mybtn">Info</button>
    10. </td>
    11. </tr>
    12. <?php
    15. }
    16. ?>



    im Script ist dann der Zugriff auf diese Variable wie folgt:

    Quellcode

    1. var btn = document.getElementById("mybtn");


    Wäre cool wenn mir jemand auf die Sprünge helfen könnte.

    Grüße
    Runshak

    Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von „Runshak“ ()

    Zeile 11 ist scheinbar nicht Teil des PHP-Skript, oder übersehe ich da ein erneutes <?php?

    EDIT: Aber offenbar ist das, wenn ich dich richtig verstehe, gar nicht das Problem (alle Buttons werden bereits ausgegeben, oder?). Um deine Frage zu beantworten: Zwei Elemente dürfen natürlich nicht dieselbe ID haben.
    Besucht auch mein anderes Forum:
    Das Amateurfilm-Forum

    nein, hast du schon richtig erkannt. (hab den Code nochmal bearbeitet, hatte das <?php ausversehen geloescht)

    Mit der Schleife wird eine Tabelle befüllt. Die Anzahl variiert von 1-viele. Jedem Eintrag wird ein Button zugeordnet. Jeder dieser Buttons soll aber eine eigene ID bekommen. Und ich komm nicht drauf wie ich da ne variable einbauen kann, die auch noch hochgezählt wird.

    Meine Frage ist eigentlich nur auf das "id" in Button gerichtet. Weil ich nicht weiterkomme, wie ich dort ne Variable hochzählen kann, die dann zeitgleich auch von Java script gelesen werden kann.

    Ich hab es mit

    PHP-Quellcode

    1. ​id="<?php echo $values["item_id"]; ?>"
    probiert. da die item_id eindeutig ist. aber dann wüsste ich nicht, wie ich in Java Script auf das zugreifen kann.

    Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von „Runshak“ ()

    Da ich dein ganzes JS nicht kenne, finde ich die Frage sehr schwer zu beantworten.

    Wenn du machst:

    PHP-Quellcode

    1. <button class="buttonLog" id="mybtn<?php echo $values["item_id"]; ?>">Info</button>

    so könntest du die Elemente abfragen, deren IDs mit "mybtn" anfangen.
    Besucht auch mein anderes Forum:
    Das Amateurfilm-Forum

    Liege ich mit der Vermutung richtig, dass es an der gleichen Button-ID liegt?

    Die Funktion document.getElementById("mybtn"); liefert dir nur den ersten fund zurück, daher funktioniert das nur mit dem 1. Button.

    Buttons nummerieren:

    PHP-Quellcode

    1. $html = '';
    2. for($i = 0; $i < count($_SESSION['shopping_cart']); $i++)
    3. $html .= "<button class='buttonLog' id='mybtn-{$i}'>Info-{$i}</button>";


    Button dessen ID mit mybtn- beginnt ermitteln:
    document.querySelectorAll('[id*="mybtn-"]');

    Danke für eure Antworten.

    ich hab mal mit der Antwort von @Fakiz gespielt aber es nicht wie gewünscht hinbekommen.

    wenn ich die for-Schleife von @Fakiz einbaue bekomme ich keinen Button. Ich hänge mal den Code an und auch vom Script

    PHP-Quellcode

    1. <?php
    2. if(!empty($_SESSION["shopping_cart"]))
    3. {
    4. $total = 0;
    5. foreach($_SESSION["shopping_cart"] as $keys => $values)
    6. {
    7. ?>
    8. <tr>
    9. <td><?php echo $values["item_name"]; ?></td>
    10. <td>
    12. <?php
    14. $btnvar = '';
    15. for($i = 0; $i < count($_SESSION['shopping_cart']); $i++)
    17. $btnvar .= "<button class='buttonLog' id='mybtn-{$i}'>Info</button>";
    19. ?>
    20. <!-- The Modal -->
    21. <div id="myModal" class="modal">
    23. <!-- Modal content -->
    24. <div class="modal-content">
    25. <div class="modal-header">
    26. <span class="close">&times;</span>
    27. <h2>Detailed information about <?php echo $values["item_name"]; ?> </h2>
    28. </div>
    29. <div class="modal-body">
    30. <p><?php echo $values["item_description"]; ?></p>
    31. <p>Some other text...</p>
    32. </div>
    33. <div class="modal-footer">
    34. <h3>COPYRIGHT © 2020 </h3>
    35. </div>
    36. </div>
    37. </div>
    38. </td>
    39. <td><?php echo $values["item_quantity"]; ?></td>
    40. <td>RMB <?php echo $values["item_price"]; ?></td>
    41. <td>RMB <?php echo number_format($values["item_quantity"] * $values["item_price"], 2);?></td>
    42. <td><a href="Warenkorb.php?action=delete&id=<?php echo $values["item_id"]; ?>"><span style="color: #EC6B0D; text-decoration: none;">Remove</span></a></td>
    45. </tr>
    47. <?php
    49. $total = $total + ($values["item_quantity"] * $values["item_price"]);
    50. }
    51. ?>


    Quellcode

    1. ​// Get the modal
    2. var modal = document.getElementById("myModal");
    4. // Get the button that opens the modal
    5. //var btn = document.getElementById("myBtn");
    6. var btn = document.querySelectorAll('[id*="mybtn-"]');
    8. // Get the <span> element that closes the modal
    9. var span = document.getElementsByClassName("close")[0];
    11. // When the user clicks the button, open the modal
    12. btn.onclick = function() {
    13. modal.style.display = "block";
    14. }
    16. // When the user clicks on <span> (x), close the modal
    17. span.onclick = function() {
    18. modal.style.display = "none";
    19. }
    21. // When the user clicks anywhere outside of the modal, close it
    22. window.onclick = function(event) {
    23. if (event.target == modal) {
    24. modal.style.display = "none";
    25. }
    26. }

    Runshak schrieb:

    bekomme ich keinen Button

    Logisch, denn du gibst $btnvar nicht aus. Irgendwann nach der for-Schleife muss natürlich ein echo $btnvar; stehen.

    Nachtrag: Allerdings hast du jetzt zwei Schleifen, beide über alle Elemente von $_SESSION["shopping_cart"]. Das ist natürlich falsch, jetzt bekommst du deutlich zu viele Buttons.
    Besucht auch mein anderes Forum:
    Das Amateurfilm-Forum

    Basierend auf dem letzten Snippet sehe ich jetzt keinen Grund warum du die Button´s nummerieren wills/musst. Ebenso verhält es sich mit dem geposteten JavaScript.
    Nahe zu alle HTML Elemente können mit dem onclick Attribut ausgestattet werden das ist nichts anderes als den Click Event des buttons zu abonieren. Kleineren Dingen wie das einblenden eines Dialogs/Popups lassen sich so einfach realisieren z.B. so:

    HTML-Quellcode

    1. <button class="buttonLog" id="mybtn-1" onclick="document.getElementById('myModal-1').style.display = 'block';">Info</button>
    3. <span class="close" onclick="document.getElementById('myModal-1').style.display='none';">&times;</span>


    In Zeile 42 könntest du dem Link direkt einen Style Attribute verpassen und würdest dir dann den Span sparen.

    Wie Markus bereits erwähnte hast du jetzt 2 schleifen die Schleife von mir ist aber überflüssig. Es empfiehlt sich auch, meiner Meinung nach zumindest, wenn möglich auf ein Templatesystem zurückzugreifen damit erleichterst du dir das Warten und erweitern deiner Programme erheblich.

    "Template Beispiel"

    Dialog Template, binhaltet 3 "Textmarken" {ID}, {ITEM_NAME}, {ITEM_DESCRIPTION} (modal.tpl)

    HTML-Quellcode

    1. <!-- The Modal -->
    2. <div id="myModal-{ID}" class="modal" style="display: none;">
    3. <!-- Modal content -->
    4. <div class="modal-content">
    5. <div class="modal-header">
    6. <span class="close" onclick="document.getElementById('myModal-{ID}').style.display='none';">&times;</span>
    7. <h2>Detailed information about {ITEM_NAME}</h2>
    8. </div>
    9. <div class="modal-body">
    10. <p>{ITEM_DESCRIPTION}</p>
    11. <p>Some other text...</p>
    12. </div>
    13. <div class="modal-footer">
    14. <h3>COPYRIGHT © 2020 </h3>
    15. </div>
    16. </div>
    17. </div>


    HTML Grundgerüst, beinhaltet einen "Textmarke" {TABLE_ROWS} (html.tpl)

    HTML-Quellcode

    1. <!DOCType html>
    2. <html lang="en">
    3. <head>
    4. <title>MyExampleScript</title>
    5. </head>
    6. <body>
    7. <!-- Content table -->
    8. <table>
    9. <thead>
    10. <tr>
    11. <td>ItemName</td>
    12. <td>InfoButton</td>
    13. <td>Modal</td>
    14. </tr>
    15. </thead>
    16. <tbody>
    17. {TABLE_ROWS}
    18. </tbody>
    19. </table>
    20. </body>
    21. </html>


    Script zum erstellen der Tabelle

    PHP-Quellcode

    1. // Testseite erstellen
    3. // Tabellenzeilen erstellen
    4. $tblRows = createTableRows();
    6. // Html Template laden
    7. $html = file_get_contents('html.tpl');
    9. // Html ausgeben
    10. echo str_replace('{TABLE_ROWS}', $tblRows, $html);
    12. /**
    13. * Create shopping cart table rows
    14. * @return string
    15. */
    16. function createTableRows() {
    17. // Session variable validieren
    18. //...
    20. // Tabellenzeilen
    21. $rows = '';
    23. // Html Template für Dialog laden
    24. $modalTpl = file_get_contents('modal.tpl');
    26. foreach($_SESSION["shopping_cart"] as $values)
    27. {
    28. $id = $values["item_id"];
    29. $name = $values["item_name"];
    31. // Hier wird das onclick Attribute genutzt um den dazugehörigen Dialog zu öffnen
    32. $btn = "<button class='buttonLog' id='mybtn-{$id}' onclick='document.getElementById(\"myModal-{$id}\").style.display = \"block\";'>Info</button>";
    34. // Das HTML ist in einer seperaten Template Datei ausgelagert und mit 3 "Textmarken" versehen, diese werden mit den aktuellen Werten ersetzt
    35. $modal = str_replace(array('{ID}', '{ITEM_NAME}', '{ITEM_DESCRIPTION}'), array($id, $name, 'Ich beschreibe einen Artikel...'), $modalTpl);
    37. // Zuguter letzt wird dann noch die Tabellenzeile erstellt
    38. $rows .= "<tr><td>{$name}</td><td>{$btn}</td><td>{$modal}</td></tr>\n";
    39. }
    41. // Rückgabe der erstellten Tabellenzeilen
    42. return $rows;
    43. }

    Danke für eure Antworten.

    Ich habe mir jetzt mal das mit den "On-Click-Events" angeschaut und ja es funktioniert nun so, dass alle Buttons eine Aktion ausführen. Allerdings führt jeder Button nun exakt das selbe aus. Sprich ich sehe immer nur die Information von dem zuletzt hinzugefügten Produkt. Aber genau deswegen, dachte ich, dass ein nummerierter Button das Problem dahin gehend löst, dass ich bei jedem Button, dann auch das angezeigt bekomme, was ich möchte - nämlich die Information des jeweiligen Produkts. Weil jedes Produkt natürlich seine eigenen Informationen hat. Ich schau mal ob ich das mit den Templates so hinbekomme, aber ich vermute, dass ich dann das selbe Problem wieder habe.

    Die Templates sind super! Wusste bis dahin nicht was man damit so machen kann =O

    Mit Hilfe von deinem Beispiel konnte ich jetzt meinen Code soweit gestalten, dass es wie gewünscht funktioniert. Nur eine letzte Sache weiß ich nicht wie ich das jetzt umsetzen kann.

    Wie bekomme ich

    PHP-Quellcode

    1. <a href="Warenkorb.php?action=delete&id=<?php echo $values["item_id"]; ?>"><span style="color: #EC6B0D; text-decoration: none;">Remove</span></a>


    in meinen Template Code?

    also quasi sowas

    PHP-Quellcode

    1. $remove = " <a href="Warenkorb.php?action=delete&id=<?php echo $values["item_id"]; ?>"><span style="color: #EC6B0D; text-decoration: none;">Remove</span></a> "
    falls sowas von php vorgesehen ist...

    PHP-Quellcode

    1. $rows .= "<tr><td>{$name}</td><td>{$btn}</td><td>{$quant} {$modal}</td><td>RMB {$price}</td><td>RMB {$sum}</td><td>{$remove}</td></tr>\n";
    3. }
    4. // Rückgabe der erstellten Tabellenzeilen
    5. return $rows;


    Wenn das mit dem $remove klappt, dann bin ich happy :thumbsup: