v4: Multi-Target not working with hx-target

[rollinger]

Multi-Target not working with hx-target as suggested by the docs:
Contradicts https://four.htmx.org/docs#multiple-targets

Being aware of hx-partials and hx-swap-oob, aka the correct way - still the docs suggests I can swap a response to multiple targets, like below. I get no errors for the button clicks.

this.version = '4.0.0-beta4'

<!-- This Button swaps #r1 but not r2 -->
<button hx-get="/simple-response" hx-target="#r1, #r2">
    Get Response
</button>
<!-- This Button also swaps #r1 but not r2, even though r2 is defined first -->
<button hx-get="/simple-response" hx-target="#r2, #r1">
    Get Response
</button>
<!-- This Button also swaps #r1 and ignores r2, selected by class -->
<button hx-get="/simple-response" hx-target=".response-class">
    Get Response
</button>

<div id="r1" class="response-class">Request!</div>
<div id="r2" class="response-class">Request!</div>

[MichaelWest22]

Yeah sorry that documenation is not correct and htmx has never been able to target multiple targets from the hx-target attribute as it is very much by design a single target solution. It is called hx-target which implies a single target. To target a response to multiple places is a a valid rare edge case request though so we support it via extensions in htmx2 and in 4 we have a new built in extension https://four.htmx.org/extensions/hx-targets that addresses this use case well.

I've just pushed an update to the develop branch to the documentation to fix an issue where inheritance for hx-targets is not quite right as you need hx-targets:inherited for it to apply to children as all normal hx-attributes work. And updated the base Doco to point to the extension.

[rollinger]

Agree, the single target totally makes sense. This part of the documentation tripped me up: https://four.htmx.org/docs#multiple-targets

I'd suggest replace the section with:

Multiple Targets

By default, the hx-target attribute updates only a single element. To target multiple elements with one response, consider using out‑of‑band swaps (hx-swap-oob) or partial tags (hx-partials). These multi‑target update strategies give you more control over swap handling.

If your use case requires you to swap the same response into multiple targets, use the built‑in hx‑targets extension. This extension adds the hx-targets attribute, which swaps the response content into all elements that match multiple CSS selectors, separated by comma.

<button hx-get="/api/notification" hx-targets=".alert-box, #special-alert-box">
    Refresh All Alerts
</button>
<div class="alert-box">Alert 1</div>
<div class="alert-box">Alert 2</div>
<div id="special-alert-box">Alert 3</div>

The example above updates all three elements with the same response.

[YamiOdymel]

The behavior of hx-target and the documentation is indeed confusing. You need hx-targets to swap multiple targets, but you might not realize that the native hx-target in <hx-partial> actually supports swapping multiple targets in the four-dev branch.

Right now, we have:

1. hx-target supports multiple targets only when it's used in <hx-partial>.
2. hx-target does not support multiple targets when it's used on a regular DOM element (e.g. <button>).
3. You need hx-targets on regular DOM elements, but you don't need it inside <hx-partial>.

I hope these behaviors can eventually be unified so that there's only a single hx-target API (though I understand there are some concerns about doing so).

And again, I really appreciate all the effort you've put into this library. It has helped me a lot by freeing me from Vue, React, and Svelte 😭👍

---

Related:

• hx-target with a .class selector only swaps the first matching element #3550
• [4.0.0-alpha7] BUG: hx-swap-oob not updating multiple targets #3683
• [4.0.0-alpha7] Allow hx-target in <hx-partial> to swap multiple targets using a .class selector? #3684
• support multiple targets via selectors in oob/partial #3691

[MichaelWest22]

Yeah there can only be one target in htmx because this is just how the core request cycle is designed to work with all its events. This is not really something we can just solve easily without breaking existing compatibility and user expectations for events and actions. OOB and by extension hx-partial have always been able to target multiple elements because they our outside of the main request swap event cycle and so can target things as they please without impacting the single main request target.