help understanding HTMX behavior and JS

[bfallik]

I have a simple web app (written in Go) that combines HTMX and TailwindCSS/Flowbite. I tried to use a simple dismissible alert component from Flowbite. When I display the alert on the initial page load, the dismiss button works fine, but when I include the alert within an HTML fragment returned from hx-get, then the dismiss button does nothing.

I can workaround this problem with a little bit of hyperscript, _="on click remove #my-alert", but I'd like to understand this situation further.

It seems like the Flowbite Javascript responsible for removing the alert is never run on the new HTML fragment that HTMX replaces in the DOM. But I'm not sure how I'd confirm that? One oddity, which may be unrelated, is that even though the page displays the new HTML fragment returned from the server, Chrome Dev Tools always shows the original <div> in the page source. Is that expected?

I scoured the HTMX docs and wonder if this is somehow related to 3rd party JS but I can't figure out the relationship or how to address it (without hyperscript) if so. I'd like to understand this behavior better so I can anticipate when JS may not apply to HTML fragment updates.

Thx in advance!

[David-Guillot]

Hi @bfallik ,

It all depends on how JS events listeners are bound to DOM elements.

Flowbite source code for dismiss component contains an initDismiss() function that is bound to DOMContentLoaded event. So it doesn't get called when htmx loads an HTML fragment.

What you can do is plug a call to that function from the htmx:load event.

[bfallik]

@David-Guillot

Thanks, this is very helpful!

At a high level, I now understand that I can use the htmx:load event to perform JS actions (like initialization) that third-party libraries may require.

In this specific case I'm still not exactly sure how to invoke initDismiss() directly from my code, but that's probably a Flowbite or JS-specific question that I can figure out on my own.

[CleitonDeLima]

As far as I know, flowbite doesn't emit events in its components, it's a bit annoying to handle it.

themesberg/flowbite#286

[vkgautham]

@David-Guillot Wouldn't htmx:load event fire for every node inserted into the DOM, resulting in multiple callback to the JS code?

Example:

(function (){
    htmx.onLoad(function(elt) {
        var myEventListener = htmx.on("#toggleSideBar", "click", function(evt){ 
            // Sidebar
            console.log('toggle from htmx:onLoad');
            htmx.toggleClass(htmx.find("#navSideBar"), "close");    
        });
    })
})();

would result in loading of js for 5 times

Instead of htmx:onLoad, htmx:afterSettle event listener on body would load the JS callback once, but this also requires callback on window.onload for initial request.

function toggleSideBar(){
    const sideBar = document.querySelector("#navSideBar"),
          toggleSideBarButton = document.querySelector("#toggleSideBar");

    toggleSideBarButton.addEventListener("click" , () =>{
        sideBar.classList.toggle("close");
    }); 
    console.log('toggle from htmx:afterSettle');
}
window.onload = toggleSideBar;
(function () {
    document.body.addEventListener("htmx:afterSettle", toggleSideBar);
})();

Result:

[David-Guillot]

Yes thanks @vkgautham: my answer was more of a generic explanation of how you can plug any external JS library to some DOM nodes inserted after page load through htmx. There are probably more optimized/relevant implementations for each use case, and your proposition looks like one 👍

[bfallik]

Just in case anyone else stumbles on this discussion, after understanding the response from @David-Guillot , I was able to get things working with the following code included in the fragment:

    <script>
        htmx.onLoad(function (content) {
            content.querySelectorAll('[data-dismiss-target]').forEach(triggerEl => {
                const targetEl = document.querySelector(triggerEl.getAttribute('data-dismiss-target'))

                new Dismiss(targetEl, {
                    triggerEl
                })
            })
        })
    </script>

[David-Guillot]

Ah yes, this is the correct implementation of the architecture I wanted to explain 💪

[junctionapps]

For the next poor soul trying to deal with this but using a Datepicker and not the dismissible alert (because it seems all troubleshooting of this leads to this thread), using the same method above, placing the following script in the html loaded by the htmx call will initialize any datepickers in the new content. initDatepickers appears to be the only function exported for use. It uses document.querySelectorAll... but after the htmx.onLoad event, it looks like the new datepicker inputs are in the document context. Thank you for the suggestion @David-Guillot and for the "here's what I did..." code paste @bfallik. It was kind of you to come back to the thread and explain how you solved it (not just that you figured it out).

<script>
    htmx.onLoad(function () {
        Flowbite.initDatepickers();
    })
</script>