Wie übergebe ich $_GET-Variablen von einem Link an ein Bootstrap-Modal?

Übergabe von $_GET-Variablen von einem Link an ein Bootstrap-Modal

Im Kontext von Bootstrap-Modalen erfordert die erfolgreiche Übergabe von $_GET-Variablen von Links ein vorsichtiger Ansatz. In diesem Artikel werden verschiedene Methoden zur Bewältigung dieser Aufgabe vorgestellt, jede mit ihren eigenen Vorteilen und Überlegungen.

Einfache Lösung mit PHP-Datei:

Diese Lösung beinhaltet das Erstellen eines Snippets in Ihrer HTML-Code:

<td><span data-placement="top" data-toggle="tooltip" title="Show"><a class="btn btn-primary btn-xs" data-toggle="modal" data-target="#editBox" href="file.php?id=<?php echo $obj->id; ?>"><span class="glyphicon glyphicon-pencil"></span></a></span></td>

Rufen Sie im modalen HTML Datensätze basierend auf der über den GET-Parameter übergebenen ID aus der Datenbank ab und zeigen Sie sie innerhalb an modal.

Alternative Lösung mit Ajax und Bootstrap Modal Event Listener:

Diese Lösung verwendet den Bootstrap Modal Event Listener, um die ID an das Modal zu übergeben, ohne ein separates PHP zu verwenden Datei. Ersetzen Sie im HTML der modalen Aufrufschaltfläche das href-Attribut durch ein data-id-Attribut, um die ID der Zeile zu übergeben:

<td><span data-placement="top" data-toggle="tooltip" title="Show"><a class="btn btn-primary btn-xs" data-toggle="modal" data-target="#editBox" data-id="<?php echo $obj->id; ?>"><span class="glyphicon glyphicon-pencil"></span></a></span></td>

Rufen Sie im JavaScript-Ereignishandler des modalen Elements die Daten mithilfe der ID über Ajax ab und zeigen Sie sie an im Modal.

Alternative Lösung mit Ajax und jQuery Click Funktion:

Diese Lösung nutzt die Klickfunktion von jQuery, um einen Ajax-Aufruf zum Abrufen und Anzeigen der erforderlichen Daten zu initiieren. Ändern Sie im HTML der modalen Aufrufschaltfläche das Anker-Tag wie folgt:

<td><span data-placement="top" data-toggle="tooltip" title="Show"><a class="btn btn-primary btn-xs open-modal" href="">

Schreiben Sie in einer separaten JavaScript-Datei den folgenden Ajax-Code, um die Daten abzurufen und anzuzeigen:

$(document).ready(function() {
  $('.open-modal').click(function() {
    var id = $(this).attr('id');
    $.ajax({
      type: 'post',
      url: 'file.php', // PHP file to fetch data
      data: 'post_id=' + id,
      success: function(data) {
        $('#editBox').show('show'); // Show modal
        $('.form-data').html(data); // Display fetched data
      }
    });
  });
});

Weitergabe von On-Page-Informationen an Modal:

In Fällen, in denen nur minimale On-Page-Informationen im angezeigt werden müssen modal, Sie können dies erreichen, ohne Ajax zu verwenden. Verwenden Sie im HTML der modalen Aufrufschaltfläche Datenattribute, um die Werte zu übergeben:

<td data-placement="top" data-toggle="tooltip" title="Show">
  <a data-book-id="<?php echo $obj->id; ?>" data-name="<?php echo $obj->name; ?>" data-email="<?php echo $obj->email; ?>" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#editBox">
    <span class="glyphicon glyphicon-pencil"></span>
  </a>
</td>

Greifen Sie im zugehörigen modalen Ereignishandler wie folgt auf die übergebenen Werte zu:

$('#editBox').on('show.bs.modal', function(e) {
  var bookid = $(e.relatedTarget).data('book-id');
  var name = $(e.relatedTarget).data('name');
  var email = $(e.relatedTarget).data('email');
});

Das obige ist der detaillierte Inhalt vonWie übergebe ich $_GET-Variablen von einem Link an ein Bootstrap-Modal?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!