HTMX and Webflows Javascript.

So when using HTMX and webflow we need to re-establish webflows javascript library.

This is because when we load a new element into the page webflow has already initiated it's javascript library and the new element cannot register events. So thanks to finsweet we can reinitialise those events on htmx load.

Look at the open panel code. you can do the same with Webflows native attributes (unless from a cms)

And the Panel page.

All the code needed is in the Head and close Body of the page. However here are the links

‍

Installing HTMX

https://htmx.org/docs/#installing

The finsweet utility to restart

https://finsweet.com/open-source/ts-utils/

// Function to restart Webflow interactions
function handleRestartWebflow() {
try {
finsweettsUtils.restartWebflow();
console.log('restartWebflow called successfully');
} catch (error) {
console.error('Error calling restartWebflow:', error);
}
}

// Add an htmx:load event listener to the htmx element
document.getElementById('zone2').addEventListener('htmx:load', function() {
// Call the restartWebflow function when the htmx element loads
handleRestartWebflow();
});
</script>

‍

Open Panel