htmx

Can hx-select-oob update several targets?


If I understand the docs correctly, it allows:

<div>
  <div id="alert"></div>
  <button hx-get="/info" 
          hx-select="#info-details" 
          hx-swap="outerHTML"
          hx-select-oob="#alert">
    Get Info!
  </button>
</div>
  1. replace the whole <button> due to the hx-swap directive with the content of #info-details - via hx-select="#info-details" - from the response sent.

  2. define a 2nd target hx-select-oob="#alert" which takes the content from #alert from the response sent.

Is there any way hx-select-oob can have multiple targets?

Like hx-select-oob="#alert,#second-target"?

Or, how do I manage updating multiple targets at once?


Solution

  • As of Dez 2024, the current accepted answer is not an ideal answer. Actually, I think the following is probably valid since htmx 1.0.2 (Dez 2020).

    Yes, you can just specify multiple elements with hx-select-oob:

    hx-select-oob="#foo:outerHTML,#baz:innerHTML"
    

    which is quite often the most convenient way to deal with multiple swaps from my point of view.

    Note that you can also specify the swap style, which makes this quite powerful. Be careful with nested elements though, because you can easily swap both children and parents and end up "destroying" your fragments accidentally.