Loading Dynamic Content on Opening Bootstrap Modals with Stimulus JS

Photo by Fotis Fotopoulos on Unsplash

When working on a recent project for Zonmaster.com, I encountered a requirement that called for loading dynamic data into a Bootstrap 5 modal every time it was opened. By default, Bootstrap modals are rendered during the page load and remain static thereafter, which can cause performance issues if the modal’s content is resource-intensive. To overcome this limitation and ensure that the modal always displays up-to-date information, I sought a solution that involved fetching data from the server each time the modal was opened.

In this article, I’ll walk you through the steps I took to implement this feature using Stimulus JS, a lightweight JavaScript framework. By leveraging Stimulus’ action-response pattern, we can dynamically load the modal’s content from the server and provide a seamless user experience. So, whether you need to display real-time data, user-specific information, or dynamic content in your Bootstrap modals, this solution will ensure that your users always have the most relevant information at their fingertips.

The usual Bootstrap 5 modal

Usually, you have the modal that looks like this:

<div class="modal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">…