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

  • If your goal is to return html content and copy the same content to multiple targets - you simply use class selector instead of ID.

    If you have multiple content returned, then you need to use htmx-swap-oob