ah,

a form can't be inside a tr

, my old friend, we meet again

hm ... everything besides the trigger works

I bet if you inspect the dom, the form element isn't even there

yes it is there. But I encountered many cases where this fails ...

for example if I swap anything including a

<tr>

but the code like I posted it works in general (besides the JS function trigger)

I have seen people put the form in the first

td

and then use this to associate the input properly: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-form

before doing it like this I had the form around the whole tbody ... that also worked ... but looked strange 🙂

soooo you would recommend something like this:

html
<table>
    <tr id="editProductRow">
        {% for field in form.visible_fields %}
            <td><input form="htmxform" id="...">{{ field }}</td>
        {% endfor %}
        <td class="text-end">
            <form id="htmxform"
                  hx-post="{% url 'update' pk %}"
                  hx-target="#editProductRow"
                  hx-encoding="multipart/form-data"
                  hx-swap="outerHTML">
                <button type="submit"
                        class="btn btn-success"
                        hx-trigger="click[showEditButtons()]">
                     OK
                </button>
            </form>
        </td>
    </tr>
</table>

I am not sure I would say I recommend it, but I think that's how HTML works when you want a form spread across tds within a tr

I might switch to divs and use styling to get a table-like effect, just to avoid dealing w/ the whole issue

Yes I had that ... but styling is just soooo much easier with a table 😦

😑

the year is 2060

I like tables.

i love tables

i just wish HTML treated them more flexibly

sorry, I thought it was kind of mandatory to bring in a meme at some point

I do not abandon my tables. Whenever I did that, and went down the hellish

<div>

way I had to pay the price in despair and frustration and !importants 😦

many such cases

it's easy: first we simply wage a hostile takeover of the w3c...

display: table

?

sorry. I did not want to start a meme war 😦 I just needed to vent a little bit of my frustration over my whole table idea to turn out not as great as I hoped it would.

where is the application form?

with this approach neither my form, nor my hx-trigger work 😦

is it viable to just put the form over the whole table body?

@User maybe not use a after all, just add the hx-* attributes to that element and use hx-include to inject the fields (which I think you had originally). Using a form might be easier in most cases but clearly it's problematic in a table.

thx to @User I solved the problem like this:

html
<table>
    <tr id="editProductRow"
        hx-target="#editProductRow"
        hx-encoding="multipart/form-data"
        hx-swap="outerHTML"
        hx-include="#editProductRow"
        hx-trigger="click[showEditButtons()] target:#submitbutton">
        {% for field in form %}
            <td>{{ field }}</td>
        {% endfor %}
        <td class="text-end">
            <button type="submit"
                    class="btn btn-success"
                    id="submitbutton">
                 OK
            </button>
        </td>
    </tr>
</table>

Does hx-include work for you?

yes!