Skip to content

Add support for "naked" triggers and htmx:trigger event#1327

Merged
1cg merged 1 commit intobigskysoftware:devfrom
alexpetros:dev
Mar 28, 2023
Merged

Add support for "naked" triggers and htmx:trigger event#1327
1cg merged 1 commit intobigskysoftware:devfrom
alexpetros:dev

Conversation

@alexpetros
Copy link
Collaborator

Description

Adds a new htmx:trigger event that is fired whenever an HTMX AJAX request would be fired. In addition, the hx-trigger attribute can be specified on an element without an AJAX request, in which case it will simply fire the htmx:trigger event on the action specified by the attribute, and do nothing else.

This pattern allows for specifying client-side actions that don't require a network request, while remaining within the HTMX control paradigm.

This is a revised version of #1320, based on the discussion about how best to integrate its ideas. This PR implements two of the four proposed concepts:

  • Support "naked" hx-trigger, make processVerbs set up a "fake" requestHandler that immediately terminates.
  • Trigger a new non-bubbling htmx:trigger event

Example Usage

<button hx-trigger=click>Click me!</button>
<script>
htmx.on('hx-trigger', function(elt) {
  evt.detail.elt.innerText = 'Clicked!'
}
</script>

The `htmx:trigger` event is fired whenever an HTMX AJAX request would
be. Now, `hx-trigger` can also be specified on an element without an
AJAX request, which will simply fire the `htmx:trigger` event on the
action specified by the attribute, and do nothing else.

This pattern allows for specifying client-side actions that don't
require a network request, while remaining within the HTMX control
paradigm.
@1cg 1cg merged commit 5a5ebd7 into bigskysoftware:dev Mar 28, 2023
@alexpetros alexpetros deleted the dev branch March 28, 2023 15:18
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.

2 participants