Comment passer des variables $_GET à un modal Bootstrap ?

Comment transmettre des variables $_GET d'un lien à un modal Bootstrap

La transmission de variables $_GET d'un lien à un modal Bootstrap est essentielle pour modifier et afficher des données spécifiques dans un modal. Voici plusieurs solutions pour y parvenir :

Solution simple

• Bouton d'appel modal :

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

• HTML modal :

  <div class="modal fade">

• fichier.php

  $Id = $_GET["id"]; // Escape the string if needed
  // Run query to fetch records against $Id
  // Show records in modal body

Solution alternative avec Ajax et Bootstrap Modal Event Listener

• Bouton d'appel modal :

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

• HTML modal :

  <div class="modal fade">

• Script :

  $( document ).ready(function() {
  $('#myModal').on('show.bs.modal', function (e) {
    var id = $(e.relatedTarget).data('id');
    $.ajax({
      type : 'post',
      url : 'file.php', // Fetches records
      data : 'post_id='+ id,
      success : function(data) {
        $('.form-data').html(data); // Shows fetched data in modal body
      }
    });
  });
  });

• file.php

  if ($_POST['id']) {
  $id = $_POST['id'];
  // Run query to fetch records
  // Echo the data to be displayed in the modal
  }

Solution alternative avec la fonction de clic Ajax et jQuery

• Bouton d'appel modal :

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

• HTML modal :

  <div class="modal fade">

• Script :

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

• fichier.php

  if ($_POST['id']) {
  $id = $_POST['id'];
  // Run query to fetch records
  // Echo the data to be displayed in the modal
  }

Transmettre les informations sur la page à Modal

• Bouton d'appel modal :

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

• Événement modal :

  $(document).ready(function(){
  $('#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');
    // Can pass as many on-page values to modal
  });
  });

En implémentant l'une de ces solutions, vous pouvez efficacement transmettre des variables $_GET d'un lien vers un modal Bootstrap, vous permettant pour charger et manipuler des données de manière dynamique dans une fenêtre modale.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!