Open volysandro opened 4 months ago
I understand that you want to figure out the situation here, but there's a first problem even before getting to htmx ; you have an invalid here HTML, as a tbody
may only contain tr
children, thus not a form
.
When you look at the DOM in Chrome's inspector with the HTML you provided, here's how it actually gets parsed: So all your tr/td containing inputs were moved out of the form itself, thus the form feeling "disabled", but the core issue isn't htmx-related here, it's simply invalid HTML.
In your case, you might want to use the form
attribute + get your form either inside one of the td
for ex, or outside the table, where it'd be legit to reside
I noticed this! Weirdly, the form is parsed wrong on both page load and htmx-refresh, the form works on a fresh page load.
And I know it's sacrilegious / not conform.. But I figured chances are high someone splattered paint and encountered the same behaviour, so I was still curious about the root cause:P
so I was still curious about the root cause
As said above the very root cause is that it's not valid HTML, thus it's up to your browser to decide how to parse this HTML.
The result here in Chrome is that your form gets disconnected and rendered apart from your <tr>
and <td>
elements.
Your inputs being no longer inside the form, you have an "input-less" form and "form-less" inputs that have no relationship between each other.
Thus, in your setup, the hx-post
is bound to a form that won't ever be triggered anyway as no input/submit button are attached to it.
You can bind these inputs/buttons again to the form using the standard form
attribute though.
And I have no idea why the form would work on a fresh page load in the first place given the situation 😆 but don't get me wrong, the anomaly here is the form working sometimes, not the form not working!
Sorry if this is a duplicate, I rarely post issues, only when I really can't even pinpoint the issue.
TLDR;
tbody
contains rows of data, and the last row is a form to add new rows. The form receives a freshtbody
and thus replaces itself as well. Issue: In firefox, I can re-use the form again as soon as I receive it, but in Chrome I have to do a full page reload, as the form just doesn't become active. No errors or warnings.I know there's a million better ways of doing this, but it's a quick mockup, and I still want to figure this one out:D
This is the updated table I get via htmx, the form in the last row reactivates again in Firefox, but not in Chrome.