Strategy for modal dialogs lazy-loading additional content.

[askreet]

Hi all - we're just getting started with HTMX for a relatively simple internal portal application. One of our use cases is a button which opens a modal dialog that fetches some additional content to generate a form. We're using Bootstrap 5 for modals styling/js.

What we've built so far is essentially some HTML containing the modal with the form when the page renders, and a button which uses bootstrap annotations to show the modal. This works fine, but the contents of that form are expensive to populate, and most of the time, the users aren't opening the modal.

I've attempted to use hx-trigger="revealed", but the modal is already "within the viewport" even if it's not visible. My next idea was to use some kind of custom event, and add something like onclick="htmx.trigger('body', 'my-custom-event')" to fire the hx-get requests and populate the form at the same time the modal is being displayed. I haven't quite figured out how to fire an event to multiple form elements using this method, but my question is more general: Am I thinking about this the right way, or is there a more obvious "htmx idiomatic" pattern for a hidden form that populates expensive data only when it's displayed to the user in a modal dialog?

[Telroshan]

Hey, this may be off the mark, but the way I generally go about this is not to have any modal on the initial page.
I just have a container div with an ID, to easily target it with htmx and swap modals inside. Then in the situation you described, I would make my button (the one that toggles the modal) fetch a given endpoint, that would itself return the full HTML of the modal including the populated data (given that you need that populated data as soon as the modal appears here).

Hope this helps!

[askreet]

Interesting idea - I suppose the "click outside to close" behavior still just works in this model. I'll give that a go!

[askreet]

Worked awesome, I recommend this to anyone in the same situation. With Bootstrap in particular I had to make sure to keep the modal "shell" in the parent document and only populate it's innerHTML, so that the attribute-driven JS on their side works as expected.