How can I pass $_GET variables from a link to a Bootstrap modal?

Passing $_GET Variables from a Link to a Bootstrap Modal

In web development, it's often necessary to pass data from a link to a modal window. To achieve this using $_GET variables in Bootstrap, follow these steps:

Simple Solution

1. Modal Call Button:

   <td>

   Copy after login

   Copy after login

2. Modal HTML:
   Place the following modal HTML outside the while loop on the page where the call button is located (preferably at the bottom):

   <div class="modal fade">

   Copy after login

   Copy after login

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>

   Copy after login

Alternate Solution with Ajax

1. Modal Call Button (with data attribute):

   <td>

   Copy after login

   Copy after login

2. Modal HTML:

   <div class="modal fade">

   Copy after login

   Copy after login

3. JavaScript (with 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
         }
       });
     });
   });

   Copy after login

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

   Copy after login

Additional Notes

• To eliminate the need for a separate script to clear data from the modal, you can use $('#editBox').on('hidden.bs.modal', function () { $(this).removeData('bs.modal'); });
• Another option is to use jQuery's click function with $('.open-modal').click(function(){ ... });, where open-modal is a custom class added to the modal call button.
• You can also pass on-page information to the modal using data attributes and handle it using the bootstrap modal event.

By using these techniques, you can effectively pass $_GET variables from a link to a Bootstrap modal, allowing you to display dynamic content in your web applications.

The above is the detailed content of How can I pass $_GET variables from a link to a Bootstrap modal?. For more information, please follow other related articles on the PHP Chinese website!