oob button not swapping correctly

[denesl]

Hi all

I am trying to update a button with an oob response.
Initially it looks like this:

<div id="logbtn">
  <button class="button is-info is-light" type="button" disabled="disabled" hx-get="/scanpak/scanlog" 
    hx-target="#themsg" hx-swap="outerHTML">Scan Log
  </button>
</div>

The response includes (among other HTML):

<div id="logbtn">
  <button class="button is-info is-light" type="button"  hx-get="/scanpak/scanlog" 
    hx-target="#themsg" hx-swap="outerHTML" hx-swap-oob="true:#logbtn">Scan Log
  </button>
</div>

but after the swap the "button" looks like this:
<div id="logbtn">Scan Log</div>
All other oob swaps from the response are done correctly.

Also tried without the DIV:

 <button id="logbtn" class="button is-info is-light" type="button" disabled="disabled"
  hx-get="/scanpak/scanlog" hx-target="#themsg" hx-swap="outerHTML">Scan Log
</button>

and with a response including:

<button id="logbtn" class="button is-info is-light" type="button"  hx-get="/scanpak/scanlog"
  hx-target="#themsg" hx-swap="outerHTML" hx-swap-oob="true:#logbtn">Scan Log
</button>

there is no change at all.

Any help is appreciated.

Thanks,
Denes

[denesl]

Maybe this happens because the only difference in the HTML code is the disabled="disabled" part
so for some reason it is not detected as a change that requires an update.
Is there a way to force the swap to occur?.

[denesl]

Removed the oob swap from the response and added JS instead to enable/disable the button:

<script>document.getElementById('logbtn').disabled=false;</script>

[dz4k]

hx-swap-oob should go on the tag being swapped into that position -- in your case, the div#logbtn. This response should work:

<div id="logbtn" hx-swap-oob="outerHTML"> <!-- note the hx-swap-oob -->
  <button class="button is-info is-light" type="button"  hx-get="/scanpak/scanlog" 
    hx-target="#themsg" hx-swap="outerHTML">Scan Log <!-- no hx-swap-oob on this! -->
  </button>
</div>

[denesl]

Thank you!
It also works for the second example in my original post:

<button id="logbtn" class="button is-info is-light" type="button"  hx-get="/scanpak/scanlog"
  hx-target="#themsg" hx-swap="outerHTML" hx-swap-oob="outerHTML">Scan Log
</button>

which is kinda weird because
hx-swap-oob="outerHTML"
and
hx-swap-oob="true:#logbtn"
should be equivalent, but aren't.

[denesl]

After a bit more testing, it works with
hx-swap-oob="outerHTML:#logbtn"
but not (the disabled attribute part) with
hx-swap-oob="true:#logbtn"

[denesl]

"true" can not be combined with other hx-swap values
see docs