Working with TE and HTMX (reinit partial)

[robkuz]

Hi,

I am working with TE and HTMX and it is a bit tricky.
HTMX returns partial HTML which will then inserted/replaced in(to) the existing HTML.
The problem thou is that when working with TE it might be necessary to initialize the TE components like data-te-input-wrapper-init which will be done correctly on full page load with <script defer src="https://cdn.jsdelivr.net/npm/tw-elements/dist/js/tw-elements.umd.min.js"></script> but is not retriggered when a DOM element swap happens.

My solution so far has been to include the <script> in each partial I am returning so that the full tw-elements.und.min.js is run each time. However that is ugly AND it is also error prone when I include partials that are also available from the beginning. So on first page load the script is execed multiple times. This leads for example to the Accordion not working any more.

Is there a way to tell TE to (re)initialize a part of the DOM by selector (#id)?

[juujisai]

Hi, I'm not sure if HTMLX works similar to hugo so my suggestion may not work out for you, but maybe creating something like a partial footer-scripts.html with:

<script defer src="https://cdn.jsdelivr.net/npm/tw-elements/dist/js/tw-elements.umd.min.js"></script>

... that is added at the end of your html page could be useful?

[robkuz]

I did something along this lines by adding a flag for defining if the script should be included in a partial or not.
e.g. if the partial is self contained than the flag would be true and if the partial is part of another "bigger" html result it would be false.

[robkuz]

I think I found a solution that works

[amirvahidian]

Hi. I am curious what the solution is. I am having a similar problem. I was able to solve it by using AlpineJs and removing and reloading the script when the page is loading new html with HTMX onto the page. It works but the problem I have run into is that for pages where I have a select element in the page that initially loads, the select element doubles once I reload the script. Oddly, this does not happen with the input elements

[robkuz]

@amirvahidian I have written above about the solution

[ArzoLima]

Yes, i added the script:

<script src="{% static 'tw-elements/dist/js/tw-elements.umd.min.js' %}" type="text/javascript"></script>

at the end of each partial it causes the component to restart and the partial shows right but it also reloads the library, which causes it to show an error.

and ...

[amirvahidian]

Thank you. From what I remember adding the script to the partial works for some components but causes issue with other components. For example in my case, I had a select element in my main page and by clicking a button in the main page a modal (partial) would load with another select element in it. Because of the script in the partial, the select element in the main page would be initiated again so now I would have two select elements in my main page.

Any time I load the partial (modal), it initializes the select element in my main page and adds another select element

[robkuz]

Like I decscribed above it is important during rendering to know if your partial is a standalone partial (then you must add the script tag) OR if it is part of a larger page. Then you must NOT add the script tag.