Ankündigung

Einklappen
Keine Ankündigung bisher.

ID über Button an "Modal" (Bootstrap) übergeben

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • ID über Button an "Modal" (Bootstrap) übergeben

    Guten Abend zusammen,

    Ich möchte über einen Button ein "Modal" (Popup) laden und in diesem eine Zeile aus meiner Datenbank laden.
    Ich hoffe dass es einigermaßen verständlich rüberkommt...

    so sieht mein Code dazu aus.

    PHP-Code:
    <?php

                    $statement 
    $pdo->prepare("SELECT * FROM tanken");
                    
    $statement->execute(array());

                    while(
    $row $statement->fetch()) { 

                    
    $liter str_replace(",""."$row['liter']);
                    
    $preis str_replace(",""."$row['preisproliter']);
                    
    $gefahren str_replace(",""."$row['gefahren']);
                    
    $kosten $liter $preis;
                    
    $verbrauch $liter 100 $gefahren

                    ?>
                      <tr class="text-center">
                        <td><?php echo $row['id']; ?></td>
                        <td><?php echo date('d.m.Y'strtotime($row['datum'])) ?></td>
                        <td><?php echo $row['tankstelle']; ?></td>
                        <td><?php echo $row['liter'] . "l" ?></td>
                        <td><?php echo $row['preisproliter'] . "&euro;/l" ?></td>
                        <td><?php echo number_format($kosten2",""." ) . "&euro;" ?></td>
                        <td><?php echo $row['gefahren'] . "km" ?></td>
                        <td><?php echo number_format($verbrauch2",""." ) . "l" ?></td>
                        <td><?php echo $row['bemerkung']; ?></td>
                        <td>
                          <p data-placement='top' data-toggle='tooltip' title='Edit'>
                            <button class='btn btn-warning' data-title='Edit' data-toggle='modal' data-target='#edit'>
                              <i class='fa fa-pencil' aria-hidden='true'></i>
                            </button>
                          </p>  
                        </td>
                        <td>
                          <p data-placement='top' data-toggle='tooltip' title='Delete'>
                            <button class='btn btn-danger' data-title='delete' data-toggle='modal' data-target='#delete'>
                              <i class='fa fa-trash' aria-hidden='true'></i>
                            </button>
                          </p>  
                        </td>
                      </tr>
                    <?php
                    
    }
                    
    ?>
    Beispiel:
    beim klick auf des Edit Button, mit der ID 1 in der DB, öffnet sich das Modal und der Inhalt aus der Datenbank mit der ID 1 wird angezeigt.
    Desweiteren wird ein Formular angezeigt mit dem man dann die DB Zeilen updaten kann.


    Meine Frage ist jetzt folgende:

    wie kann ich die ID übermitteln, sodass die richtigen Datensätze im Modal angezeigt werden und dann auch die richtigen Datensätze wieder aktualisiert bzw. gelöscht werden?

    Ich bin Dankbar für jede Antwort.

    Mit freundlichen Grüßen
    Svenmann



  • #2
    wie kann ich die ID übermitteln, sodass die richtigen Datensätze im Modal angezeigt werden
    Das kommt auf den Code an, der das Modal erstellt.

    Kommentar


    • #3
      HTML-Code:
            <!-- Modal EDIT -->
            <div class="modal modal-warning fade" id="edit" tabindex="-1" role="dialog" aria-labelledby="meinModalLabel">
              <div class="modal-dialog" role="document">
                <div class="modal-content">
                  <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Schließen">
                      <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title" id="meinModalLabel"><i class='fa fa-pencil' aria-hidden='true'></i> Eintrag Bearbeiten</h4>
                  </div>
                  <div class="modal-body">
                    ...
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-outline pull-left" data-dismiss="modal">Schließen</button>
                    <button type="button" class="btn btn-outline">Änderungen speichern</button>
                  </div>
                </div>
              </div>
            </div>
            <!-- /. Modal EDIT -->
      
            <!-- Modal DELETE -->
            <div class="modal modal-danger fade" id="delete" tabindex="-1" role="dialog" aria-labelledby="meinModalLabel">
              <div class="modal-dialog" role="document">
                <div class="modal-content">
                  <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Schließen">
                      <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title" id="meinModalLabel"><i class='fa fa-trash' aria-hidden='true'></i> Eintrag löschen</h4>
                  </div>
                  <div class="modal-body">
                    ...
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-outline pull-left" data-dismiss="modal">Schließen</button>
                    <button type="button" class="btn btn-outline">Löschen</button>
                  </div>
                </div>
              </div>
            </div>
            <!-- /. Modal DELETE -->
      Das sind die Modals, noch in der Rohform.

      ich vermute das es über die $_GET Methode übergeben wird. nur weil ich nicht wie.

      Gruß Svenmann

      Kommentar


      • #4
        Zitat von Svenmann Beitrag anzeigen
        ich vermute das es über die $_GET Methode übergeben wird.
        So wie's da steht, wird gar nichts übergeben.

        Kommentar


        • #5
          Zitat von Svenmann Beitrag anzeigen
          Das sind die Modals, noch in der Rohform.
          Aus dem Grund habe ich ja dazu geschrieben, dass die Modals noch in der Rohform sind.

          Ich wollte wissen wie ich mit dem <button></button> die Variable übergeben kann und das dann in dem Modal aufgerufen werden kann

          Kommentar


          • #6
            Steht in der Doku: http://getbootstrap.com/javascript/#...related-target

            Kommentar


            • #7
              Hat nichts mit PHP zu tun.

              [MOD: Verschoben von PHP-Fortgeschritten]
              Debugging: Finde DEINE Fehler selbst! | Gegen Probleme beim E-Mail-Versand | Sicheres Passwort-Hashing | Includes niemals ohne __DIR__
              PHP.de Wissenssammlung | Kein Support per PN

              Kommentar


              • #8
                Schau dir am besten das Beispiel auf der Bootstrap Modal Seite Abschnitt: "Varying modal content based on trigger button"

                Du legst einen oder mehrer Buttons an und kannst dort mithilfe von data-irgendwas="" Daten übertragen. Es ist auch dir überlassen wieviele data- du anlegen willst.

                PHP-Code:
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-1="peter" data-2="fischer"></button
                Um die Informationen dann im Modal darzustellen brauchst du dann javascript:

                $('#exampleModal').on('show.bs.modal', function (event) {
                var button = $(event.relatedTarget) var vorname = button.data('1') var nachname = button.data('2') var modal = $(this) modal.find('.modal-body .modal-vorname').text(vorname) modal.find('.modal-body .modal-nachname').text(nachname) }) an die var button bindest du die Parameter du die durch das triggern des Buttons erhälst. Dann legst du für die Informationen variablen an. Mit button.data(' ') kannst du dann die entsprechenden data- ansprechen und deinen variablen zuweisen

                Zum Schluss werden die angelegten Variablen genutzt um deine Informationen in das Modal einzuspeißen.

                Hier nur der modal-body Ausschnitt:

                <div class="modal-body"> <div class="modal-vorname"> </div> <div class="modal-nachname"> </div> </div> Je nachdem was du mit modal.find(' ') für Klassen und ID´s ansprichst wird dort dann dein anfangs übergebener Wert ausgegeben.


                Wie gesagt, schau dir das Bootstrap Beispiel einfach mal an, dort ist das sicherlich noch etwas klarer Erklärt.

                Kommentar


                • #9
                  Hallo xSonicPN,

                  ichhabe es folgend versucht zu lösen, leider ohne Erfolg.
                  Es wird nichts ausgegeben..

                  PHP-Code:
                  <button type="button" class="btn btn-primary" style="background:#fff; border-color:#fff;"  data-toggle="modal" data-target="#exampleModal"  data-1="<?php echo $row['vorname']; ?>" data-2="<?php echo $row['nachname']; ?>"><span class="glyphicon glyphicon-eye-open green" style="font-size:16px;"></span></button>
                  [script]
                  $('#exampleModal').on('show.bs.modal', function (event) {
                  var button = $(event.relatedTarget)
                  var vorname = button.data('1')
                  var nachname = button.data('2')
                  var modal = $(this)
                  modal.find('.modal-title .modal-vorname').text(vorname)
                  modal.find('.modal-title .modal-nachname').text(nachname)
                  modal.find('.modal-body .modal-vorname').text(vorname)
                  modal.find('.modal-body .modal-nachname').text(nachname)
                  })
                  [/script]

                  HTML-Code:
                  <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
                    <div class="modal-dialog" role="document">
                      <div class="modal-content">
                        <div class="modal-header">
                          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                          <h4 class="modal-title" id="exampleModalLabel">Profil von <div class="modal-vorname"></div> <div class="modal-nachname"></div></h4>
                        </div>
                       <div class="modal-body">
                             <div class="container">
                             Vorname: <div class="modal-vorname"></div>
                             <br />
                             Nachname: <div class="modal-nachname"></div>
                             </div>
                       </div
                        <div class="modal-footer">
                          <button type="button" class="btn btn-default" data-dismiss="modal">schließen</button>
                        </div>
                      </div>
                    </div>
                  </div>
                  Es kommt nicht darauf an, wie lange man wartet, sondern auf WAS !!

                  Kommentar


                  • #10
                    data-1 ist ja auch kein gültiges data-Attribut. (https://developer.mozilla.org/en-US/...ributes/data-*)

                    Kommentar


                    • #11
                      Ich bin noch Anfänger..
                      Wie müsste denn so ein Attribut un so einem Fall aussehen ?
                      Es kommt nicht darauf an, wie lange man wartet, sondern auf WAS !!

                      Kommentar


                      • #12
                        So wie's auf der verlinkten Seite beschrieben ist.

                        Kommentar


                        • #13
                          Sorry.. Da blicke ich leider nicht durch, zumal Englisch nicht meine Stärke ist
                          Es kommt nicht darauf an, wie lange man wartet, sondern auf WAS !!

                          Kommentar


                          • #14
                            ich habe es jetzt so verstanden..

                            <button type="button" class="btn btn-primary" style="background:#fff; border-color:#fff;" data-toggle="modal" data-target="#exampleModal" data-vorname="<?php echo $row['vorname']; ?>" data-nachname="<?php echo $row['nachname']; ?>"><span class="glyphicon glyphicon-eye-open green" style="font-size:16px;"></span></button>

                            <script>
                            $('#exampleModal').on('show.bs.modal', function (event) {
                            var button = $(event.relatedTarget)
                            var vorname = button.data('vorname')
                            var nachname = button.data('nachname')
                            var modal = $(this)
                            modal.find('.modal-title .modal-vorname').text(vorname)
                            modal.find('.modal-title .modal-nachname').text(nachname)
                            modal.find('.modal-body .modal-vorname').text(vorname)
                            modal.find('.modal-body .modal-nachname').text(nachname)
                            })
                            </script>

                            funktioniert aber auch nicht
                            Es kommt nicht darauf an, wie lange man wartet, sondern auf WAS !!

                            Kommentar


                            • #15
                              und was funktioniert nicht?

                              Kommentar

                              Lädt...
                              X