Using HX-Reswap: "oob" header for updating specific elements

[tabrez96]

I'm trying to use the HX-Reswap: "oob" header to update specific elements on my page, but having trouble getting it to work as expected.

Here's a simplified example of what I'm trying to achieve:

<!-- Main content -->
<tbody>
  {% for row in rows %}
    {% include "row-template.html.j2" %}
  {% endfor %}
</tbody>

<!-- row-template.html -->
<tr id="table-row-{{ index }}">Initial content</tr>

<!-- Server response uses row-template and generates this html -->
<div id="table-row-1">Updated Item 1</div>

I'm setting the header like this:

response = make_response(render_template("item-template.html.j2", data=data))
response.headers.update(
    {
        "HX-Reswap": "oob",
    }
)
return response

I'm trying to update specific elements on my page when they change, but the oob swap through response headers isn't working as expected.

Is this approach possible with HTMX? If so, is there something I'm missing in the implementation? Should I be using a different approach for updating specific elements?

Any guidance would be greatly appreciated!

[MichaelWest22]

sorry the hx-reswap header can only be used to change the response to a different swap style from the supported list here: https://htmx.org/attributes/hx-swap/

There is no 'oob' swap style and you normally use the https://htmx.org/attributes/hx-swap-oob/ hx-swap-oob attribute in your response content to get oob swaps to work. But this setup is designed to handle additional swaps that happen as well as the main normal swap when needed. If you just returning a single swap data from your response then you probably do not want to use this feature. If you were responding to say a form submit with a response that could be a new form or a response that removes or replaces the form but you also want to add a row to a table at the same time as replacing/removing the form with the main response then hx-swap-oob can be useful. https://htmx.org/examples/update-other-content/ has some useful info.

If you don't have normal swap contents to replace and just wanted to target hx-swap-oob data to the required places then you can set hx-swap="none" on the requesting element or return hx-reswap header of "none" and these will stop it swapping anything in but it will still process any hx-swap-oob tagged items and replace them in via id or or other swap methods like beforeend of a tbody for example. Note that elements can cause problems if placed next to normal elements so often you have to return data like

<template><tr hx-swap-oob="true" id="table-row-{{ index }}">New Content</tr></template>

and this when added somewhere like the end of your server response will remove the template wrapping tags and just swap in the new table row data over top of the existing row.

You may also need to append a table row with a oob swap sometimes like:

<template><tbody hx-swap-oob="beforeend:#my-table-id tbody">
	<tr id="table-row-{{ index }}">Initial content</tr>
</tbody></template>

If you are returning just a single table row response and nothing else then you could use hx-reswap along with the hx-retarget response headers to drive your single response to do say a outerHTML swap to the target of "table-row-1" and this will override the requesting swap mode and target with what you want. I think this should only be used for exceptions though as normally you would just set the hx-swap and hx-target in your on page attributes making the request and I would only use reswap/retarget with things like redirecting a swap to update an error toast div when you have an exception you want to render to the user.