Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add ability to trigger an event on another element using HX-Trigger response header #2768

Merged
merged 7 commits into from
Jul 29, 2024

Conversation

bencroker
Copy link
Collaborator

@bencroker bencroker commented Jul 29, 2024

Description

This PR adds the ability to trigger an event on another element using the HX-Trigger response header (also HX-Trigger-After-Swap and HX-Trigger-After-Settle) by allowing a target argument.

HX-Trigger: {"myEvent": {"target": "#myElement"}}

This addition was discussed with @1cg before submitting this PR.

Testing

Added a test to ensure the event is triggered on the target element.

Note that the @ts-ignore is required to prevent Typescript complaining that the target property does not exist on never. If there’s a better way, please let me know!

screenshot-q4vQfNbz@2x

I tried using detail['target'] but that’s no better!!

screenshot-TABNcxmQ@2x

Checklist

  • I have read the contribution guidelines
  • I have targeted this PR against the correct branch (master for website changes, dev for
    source changes)
  • This is either a bugfix, a documentation update, or a new feature that has been explicitly
    approved via an issue
  • I ran the test suite locally (npm run test) and verified that it succeeded

@bencroker bencroker marked this pull request as ready for review July 29, 2024 16:31
@bencroker bencroker requested a review from Telroshan July 29, 2024 16:32
@1cg 1cg merged commit a44a1b3 into dev Jul 29, 2024
1 check passed
@bencroker bencroker deleted the bencroker-patch-3 branch July 29, 2024 18:19
@gijsleussink
Copy link

Beautiful improvement. 👍 In combination with takeClass it gives the opportunity to "activate" an element after a network call. In my case a list item.

What if the target element cannot be found? I have a list of 60k items (i.e. keywords in a dictionary) that are not all loaded on first request.
Shouldn't absence of the target element be handled? I think I now get a strange error.

@bencroker
Copy link
Collaborator Author

I think I now get a strange error.

What error?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants