goinfinite / ez

From server to PaaS in no time. User-friendly, lightweight, free.
https://goinfinite.net/ez/
Other
10 stars 0 forks source link

fix: htmx updating page after modal submit #67

Closed ntorga closed 3 months ago

ntorga commented 3 months ago

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.

ntorga commented 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.