Closed ntorga closed 3 months ago
The fix was simpler than I was expecting. The problem only happens when we use the textual => form selector.
That selector is used by a <template x-if>
from Alpine. The x-if
from Alpine will update the DOM with new content which hasn't and will not be re-evaluated by HTMX automatically.
To fix that, I just needed to call htmx.process so it can re-process the document, like this:
init() {
Alpine.watch(() => this.textualViewSelector, () => {
htmx.process(document.body);
});
}
I'm using document.body because the textual => form selector changes the tables and the modals, so quite a lot of the DOM is changed by that simple x-if
. We could use x-show
instead of x-if
so the textual => form is merely a CSS hidden component but that makes the DOM way bigger than it needs to be.
The lesson is: if you update the DOM with Alpine.js, make sure to tell HTMX about it so the HTML code updated is re-evaluated.
Not sure if it's due to the forms using divs, if I didn't prevent the default submit event but sometimes the modal submit is triggering a full page reload. Need to investige why and fix it.
On the containerProfiler.go, there is also a typo on the var contactEntities. It's supposed to be profileEntities.