Passing data to a bootstrap modal

javascript

prompt-engineering

event-listeners

modal-dialog

byNikita Barsukov·Jan 20, 2025

Here's your fast-food solution: harness the power of jQuery to summon event listeners and mutate modal content using Bootstrap's magic spell show.bs.modal. Data attributes are your trusted messengers for sending information. Here's an efficient example:

$('#myModal').on('show.bs.modal', function (e) {
  var dataId = $(e.relatedTarget).data('id');   // Hey, you! Give me the data-id!
  $(this).find('input.hidden-input').val(dataId);       // Hidden input, guard this info with your life!
});

This data-id is your secret ingredient that's encoded in an element and then phosphorylated onto a modal. Your line data-toggle="modal" data-target="#myModal" data-id="123" is the messenger crow that carries this special information.

Implementing the functionality like a Pro-Coder

Step 1: Catch that click event

JavaScript shines its light on the click event of a hyperlink, grabbing whatever dynamic data you need to pass to a modal. This is just like a rabbit jumping down a different rabbit hole each time:

$('a[data-toggle="modal"]').on('click', function() {
  var itemId = $(this).data('id'); // Just like pulling a rabbit out of a hat!
  $('#myModal').find('input.hidden-input').val(itemId); // And the rabbit goes in the hat!
});

Step 2: Wrap the mystery in a data attribute

The data-id attribute is your cloak of invisibility. It quietly holds the specific data you need for your modal.

Like a well-decorated mansion, your modal must be structured just right to accommodate dynamic guests (data). A hidden input is the secret room where it stores its treasure.

<div class="modal fade" id="myModal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <form>
      <input type="hidden" class="hidden-input" name="itemId" value=""> <!-- This is the VIP Lounge! -->
    </form>
  </div>
</div>

Step 4: Dress up your JavaScript

Just as you wear your party outfit after a shower, wrap your JavaScript code in a $(document).ready() function. This ensures it makes its grand entrance after the DOM is decked up.