Incorrect OOB swapping of second table in a two tables page

[langdiana]

I have two tables, I swap regularly the tbody of the first one and OOB swap the whole second table.
After swap the inner html of the second table (with the new content) is included in the first table and the second table is not touched. Any additional swap will add the inner html of the second table again into the first table.
OOB swapping works normal if I use something else instead of second table.

Additional info (and I think here is the problem): the trigger for swap is inside the first table, more exactly in an input field in one header. I think your function makeFragment is not working correctly in this case.

Before swap:

<table id="myTable">
  <thead> ...</thead>
  <tbody> ...</tbody>
</table>

<table id="myOobTable">
  <thead> ...</thead>
  <tbody> ...</tbody>
</table>

After first swap:

<table id="myTable">
  <thead> ...</thead>
  <tbody> ...</tbody> // new content
  <thead> ...</thead> // thead from myOobTable, new content
  <tbody> ...</tbody> //tbody from myOobTable, new content
</table>

<table id="myOobTable"> // same as before swap
  <thead> ...</thead>
  <tbody> ...</tbody>
</table>

After second swap:

<table id="myTable">
  <thead> ...</thead>
  <tbody> ...</tbody> // new content
  <thead> ...</thead> // thead from myOobTable, new content
  <tbody> ...</tbody> //tbody from myOobTable, new content
  <thead> ...</thead> // thead from myOobTable, content from first swap 
  <tbody> ...</tbody> //tbody from myOobTable, content from first swap
</table>

<table id="myOobTable"> // same as before swap
  <thead> ...</thead>
  <tbody> ...</tbody>
</table>

[Telroshan]

Hey, table elements such as tbody, tr or td often cause issues when parsed on their own at the top level of a fragment.

See the "troublesome tables" section of the docs about that.

Could you try encapsulating, in your server response's HTML, your second table (the oob swapped one), in a template tag as shown in the docs and tell us how it goes?

Table elements can be problematic when combined with out of band swaps, because, by the HTML spec, many can’t stand on their own in the DOM (e.g. or ).

To avoid this issue you can use a template tag to encapsulate these elements:

<template>
 <tr id="message" hx-swap-oob="true"><td>Joe</td><td>Smith</td></tr>
</template>

Hope this helps!

[langdiana]

Hi,
I know about that doc section but this is different. In my case, the table itself is oob swapped, not just some table elements, and a table can stand on its own in DOM:

<table id="myOobTable" hx-swap-oob="true">

As a matter of fact, I did try to wrap the entire table in a template but it's not working: the table is not rendered at all.

When I looked inside htmx code, the fragment processed by makeFragment function is something like this:

  <tbody> ...</tbody>
...
</table>

<table id="myOobTable">
  <thead> ...</thead>
  <tbody> ...</tbody>
</table>

It starts from tbody of the first table and continues past the first table's end tag, including the second table. So the DOM is messed up. Somehow the hx-swap-oob attrib is not found, I guess it's stripped along with the table tag of the second table, and the remaining of the second table from response is included as regular swap in the first table while the second table itself in the target page is not touched.

[Telroshan]

Hey, just tried locally and unfortunately I can't seem to be able to reproduce that issue.

I swap regularly the tbody of the first one and OOB swap the whole second table

Assuming here you mean targeting the tbody and swapping it as outerHTML and the second table as a whole with an outerHTML OOB swap.

Here's what I tried, let me know if I misunderstood something in your setup

Initial HTML:

<table id="myTable">
    <thead><tr><th>Test</th></tr></thead>
    <tbody><tr><td>Initial</td></tr></tbody>
</table>

<table id="myOobTable">
    <thead><tr><th>Test OOB</th></tr></thead>
    <tbody><tr><td>Initial OOB</td></tr></tbody>
</table>

<button type="button" hx-get="/test" hx-target="#myTable tbody" hx-swap="outerHTML">Swap tables</button>

Server response:

<tbody><tr><td>Swapped</td></tr></tbody>

<template>
    <table id="myOobTable" hx-swap-oob="true">
        <thead><tr><th>Test OOB</th></tr></thead>
        <tbody><tr><td>Swapped OOB</td></tr></tbody>
    </table>
</template>

I get the expected result, from to

Where the DOM after swap looks correct

If your setup is indeed similar to this one, would you mind sharing the htmx version you're using? (and try with the latest, i.e. 2.0.4 as I'm writing this, if you are on an older one, to see if by any chance it's an issue that had been fixed along past releases)

If not, could you please share your server response and triggering element's attributes so I can replicate it and investigate on my side?

Hope this helps!

[langdiana]

There is a critical difference, the trigger is inside the header of first table:

<table id="myTable">
   <thead>
       <tr>
          <th>
              <input type="text" hx-get="/test" hx-trigger="input changed delay:500ms" hx-target="#tablebody" hx-swap="outerHTML"></input>
          </th>
       </tr>
   </thead> 
   <tbody id="tablebody"><tr><td>Initial</td></tr></tbody>
</table>

<table id="myOobTable">
    <thead><tr><th>Test OOB</th></tr></thead>
    <tbody><tr><td>Initial OOB</td></tr></tbody>
</table>

[Telroshan]

Thanks for the details.

Even with the following setup, I get the same result as in my previous message:
Initial HTML:

<table id="myTable">
    <thead>
    <tr>
        <th>
            <input type="text" hx-get="/test" hx-trigger="input changed delay:500ms" hx-target="#tablebody" hx-swap="outerHTML"></input>
        </th>
    </tr>
    </thead>
    <tbody id="tablebody"><tr><td>Initial</td></tr></tbody>
</table>

<table id="myOobTable">
    <thead><tr><th>Test OOB</th></tr></thead>
    <tbody><tr><td>Initial OOB</td></tr></tbody>
</table>

Server response: same as before

So there's likely something else going on.

May I ask again:

If your setup is indeed similar to this one, would you mind sharing the htmx version you're using? (and try with the latest, i.e. 2.0.4 as I'm writing this, if you are on an older one, to see if by any chance it's an issue that had been fixed along past releases)

If not, could you please share your server response and triggering element's attributes so I can replicate it and investigate on my side?

Thanks

[langdiana]

It doesn't work for me. And yes, I'm using 2.0.4. Also I'm using Edge.
I attached a series of files with the rendered content and server response:

Initial page sent from server:
InitialPageFromServer.txt

Initial page rendered in browser:
InitialPageRender.txt

Server response after first input:
FirstInputResponse.txt

Html rendered after first server response:
FirstInputRender.txt

Server response after second input (fully identical with first server response):
SecondInputResponse.txt

Html rendered after second server response:
SecondInputRender.txt

Also, here is a screenshot with the browser after second input:

[Telroshan]

Thanks, this helps a lot!

So, if I use your initial HTML (InitialPageFromServer.txt), then send the response you provided (FirstInputResponse.txt), I indeed get the same issue.

However, if I wrap the oob table in a template as discussed before in the server response, it works as expected.
i.e, sending back this

<tbody id="tablebody"><tr><td>Test</td></tr></tbody>

<template>
    <table id="myOobTable" hx-swap-oob="true">
        <thead><tr><th> Oob header</th></tr></thead>
        <tbody><tr><td> Oob col</td></tr></tbody>
    </table>
</template>

Notice how I wrapped myOobTable in a template tag in the server response (as per FirstInputResponse.txt above)

Hope this helps!

[langdiana]

Yes, that works, thanks.
I think you shd update the docs to make it clear that any table element (not just tr, td etc) shd be embedded in a template

[Telroshan]

Yeah usually we have people swapping a table element (tr td etc.) as OOB, which then works fine wrapped in a template.
Here it's the opposite ; the main content to swap is a table-child element and the OOB one is not, maybe that's a usecase we should highlight in the hx-swap-oob docs in the "troublesome tables and lists" section?

If you are interested in improving the docs btw, PRs are always welcome 😄

[MichaelWest22]

The cause of this issue is that the contents of the whole page including the main swap and all oob swaps has to be valid content that can be parsed by the browser. htmx takes this data and converts it into a document fragment so that it can process it without having to do regex and manual text manipulation so it just uses standard browser functions to parse the html content. But this means the content as a whole has to be processable. in your partial response you had a tbody tag which by the html spec can only live inside a table and have other siblings that are also the same. So when it gets to the table tag with the oob swap it is unable to process this tag as you can't have a table next to a tbody and be valid html. So it has to skip over the table tag and this is why it then finds the tables contents and because these are valid sibling content it inserts this into the destination table.

This is why we have instructions under troublesome tables to wrap the oob content in template tags as template tags override the html placment rules. I think where the documentation is a little confusing as it would seem that you do this because the items being wrapped for oob are the problem if they are things like table sub elements but it is actually the sibling relationship between the main content nodes and the one or more oob nodes that is the real cause of the issues. So you need to wrap oob tags in template tags both if the oob tags are problem types but also if the main content nodes above or below them are problem node types.

Maybe we could change the documentation to something like:

Troublesome Tables and lists

Note that you can use a template tag to encapsulate types of elements that, by the HTML spec, can not be placed adjacent to other normal tags in the DOM (<tr>, <td>, <th>, <thead>, <tbody>, <tfoot>, <colgroup>, <caption>, <col> & <li>).

Here is an example with an out-of-band swap of a table row being encapsulated in this way:

<div>
    ...
</div>
<template>
    <tr id="row" hx-swap-oob="true">
        ...
    </tr>
</template>

Note that these template tags will be removed from the final content of the page.
When the main content node tag is one of the restricted ones you also need to wrap the oob nodes.