Passing Data to Bootstrap Modals

Bootstrap modals are a convenient way to display additional information or prompt user input without leaving the current page. However, sometimes you need to pass data to the modal when it’s triggered. In this tutorial, we’ll explore how to pass data to a Bootstrap modal using JavaScript and jQuery.

Basic Modal Structure

Before diving into passing data, let’s review the basic structure of a Bootstrap modal:

<!-- Button to trigger the modal -->
<a href="#" data-toggle="modal" data-target="#myModal">Open Modal</a>

<!-- The modal itself -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <!-- Modal content goes here -->
      <div class="modal-body">
        <input type="text" id="recipient-name">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Passing Data using jQuery

To pass data to the modal, you can use jQuery’s .on() method to listen for the show.bs.modal event. This event is triggered when the modal is about to be shown.

$('#myModal').on('show.bs.modal', function (event) {
  var bookId = $(event.relatedTarget).data('bookid');
  $(this).find('.modal-body input').val(bookId);
});

In this example, we’re listening for the show.bs.modal event on the #myModal modal. When the event is triggered, we retrieve the bookid data attribute from the element that triggered the modal (using event.relatedTarget). We then set the value of the input field inside the modal to the retrieved bookId.

Passing Data using Bootstrap’s Built-in Events

Bootstrap provides several events that you can use to pass data to the modal. One such event is the show.bs.modal event, which we’ve already discussed.

Another event is the shown.bs.modal event, which is triggered when the modal has finished being shown.

$('#myModal').on('shown.bs.modal', function (event) {
  var bookId = $(event.relatedTarget).data('bookid');
  // Do something with the bookId here
});

Example Use Case

Suppose you have a list of books, and each book has an ID. You want to display a modal when a user clicks on a book, and pass the book’s ID to the modal.

<!-- List of books -->
<ul>
  <li><a href="#" data-toggle="modal" data-target="#myModal" data-bookid="1">Book 1</a></li>
  <li><a href="#" data-toggle="modal" data-target="#myModal" data-bookid="2">Book 2</a></li>
  <li><a href="#" data-toggle="modal" data-target="#myModal" data-bookid="3">Book 3</a></li>
</ul>

<!-- The modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body">
        <input type="text" id="bookId">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<!-- JavaScript code -->
<script>
  $('#myModal').on('show.bs.modal', function (event) {
    var bookId = $(event.relatedTarget).data('bookid');
    $(this).find('.modal-body input').val(bookId);
  });
</script>

In this example, we’re using the show.bs.modal event to pass the bookid data attribute from the clicked link to the modal. We then set the value of the input field inside the modal to the retrieved bookId.

Conclusion

Passing data to a Bootstrap modal is a straightforward process that can be achieved using jQuery and Bootstrap’s built-in events. By listening for the show.bs.modal event, you can retrieve data from the element that triggered the modal and pass it to the modal itself. This technique can be used in a variety of scenarios, such as displaying additional information about a selected item or prompting user input based on the selected item.