Comment puis-je transmettre des variables $_GET d'un lien vers un modal Bootstrap ?

Passer des variables $_GET d'un lien à un modal Bootstrap

Dans le développement Web, il est souvent nécessaire de transmettre des données d'un lien à une fenêtre modale. Pour y parvenir en utilisant les variables $_GET dans Bootstrap, suivez ces étapes :

Solution simple

1. Bouton d'appel modal :

   <td>

2. HTML modal :
   Placez le HTML modal suivant en dehors de la boucle while sur la page où se trouve le bouton d'appel (de préférence en bas) :

   <div class="modal fade">

3. file.php:

   <?php
   // Include database connection here
   
   $Id = $_GET["id"]; // Escape the string if you like
   
   // Run the query
   ?>
   
   <div class="modal-header">
     <button type="button" class="close" data-dismiss="modal">&times;</button>
     <h4 class="modal-title"><center>Heading</center></h4>
   </div>
   
   <div class="modal-body">
     // Show records fetched from database against $Id
   </div>
   
   <div class="modal-footer">
     <button type="button" class="btn btn-default">Submit</button>
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
   </div>

Solution alternative avec Ajax

1. Bouton d'appel modal (avec attribut de données) :

   <td>

2. HTML modal :

   <div class="modal fade">

3. JavaScript (avec jQuery) :

   // jQuery library comes first
   // Bootstrap library
   $(document).ready(function() {
     $('#editBox').on('show.bs.modal', function(e) {
       var id = $(e.relatedTarget).data('id'); // Fetch id from modal trigger button
   
       $.ajax({
         type: 'post',
         url: 'file.php', // Here you will fetch records
         data: 'post_id=' + id, // Pass $id
         success: function(data) {
           $('.form-data').html(data); // Show fetched data from database
         }
       });
     });
   });

4. file.php :

   <?php
   // Include database connection here
   
   if ($_POST['id']) {
     $id = $_POST['id'];
   
     // Run the query
     // Fetch records
     // Echo the data you want to show in the modal
   }
   ?>

Notes supplémentaires

• Pour éliminer le besoin d'un script distinct pour effacer les données du modal, vous pouvez utiliser $('#editBox').on('hidden. bs.modal', function () { $(this).removeData('bs.modal'); });
• Une autre option consiste à utiliser la fonction de clic de jQuery avec $('.open-modal') .click(function(){ ... });, où open-modal est une classe personnalisée ajoutée au bouton d'appel modal.
• Vous pouvez également transmettre des informations sur la page au modal à l'aide des attributs de données et gérez-le à l'aide de l'événement modal bootstrap.

En utilisant ces techniques, vous pouvez transmettre efficacement les variables $_GET d'un lien vers un modal Bootstrap, vous permettant d'afficher du contenu dynamique dans vos applications Web.

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!