bigskysoftware / bigskysoftware/htmx

HX-Trigger response header target only targets first item

Open
#3,422 2 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
49.4k
Forks
1.7k
Avg merge
3d 22h
Merged PRs (30d)
30

Description

I'm trying to trigger the same named event on multiple targets from an `HX-Trigger` response header. I'm sending back something like the following:

`HX-Trigger: {"refresh": {"target": "#target-1,#target-2"}}`

I've also tried the following variations:

`HX-Trigger: {"refresh": [{"target": "#target-1"},{"target": "#target-2"}]}`
`HX-Trigger: {"refresh": {"target": ".target-shared-class"}}`

What I ultimately found is that once htmx determines the target, either as the triggering element or the element named in `target`, the code that resolves that target DOM element calls `.querySelector`, which is why it only gets the first item in the list.

Is there any reason this couldn't be modified to be `.querySelectorAll` and use `.forEach` to process the event on all of the returned results?

My workaround at this point is I have another event handler that takes a `targets` selector and an event name and calls the trigger functionality on each of them, but it seems like this should work out-of-the-box.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.