How to Pass $_GET Variables from a Link to a Bootstrap Modal?

Passing $_GET Variables from a Link to a Bootstrap Modal

In the context of Bootstrap modals, successfully passing $_GET variables from links requires a careful approach. This article presents various methods to accomplish this task, each with its own advantages and considerations.

Simple Solution with PHP File:

This solution involves creating a snippet in your 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>

In the modal HTML, fetch records from the database based on the ID passed via the GET parameter, and display them within the modal.

Alternate Solution with Ajax and Bootstrap Modal Event Listener:

This solution uses the Bootstrap modal event listener to pass the ID to the modal without using a separate PHP file. In the modal call button's HTML, replace the href attribute with a data-id attribute to pass the row's ID:

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

In the modal's JavaScript event handler, fetch the data via Ajax using the ID and display it in the modal.

Alternate Solution with Ajax and jQuery Click Function:

This solution utilizes jQuery's click function to initiate an Ajax call to fetch and display the necessary data. In the modal call button's HTML, modify the anchor tag as follows:

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

In a separate JavaScript file, write the following Ajax code to fetch and display the data:

$(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
      }
    });
  });
});

Passing On-Page Information to Modal:

In cases where minimal on-page information needs to be displayed in the modal, you can achieve this without using Ajax. In the modal call button's HTML, use data attributes to pass the values:

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

In the related modal event handler, access the passed values as follows:

$('#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');
});

The above is the detailed content of How to Pass $_GET Variables from a Link to a Bootstrap Modal?. For more information, please follow other related articles on the PHP Chinese website!