From d69341a6ddaa71911eecfb84052dc2a980b24944 Mon Sep 17 00:00:00 2001 From: Robert Schroll Date: Sat, 23 May 2020 18:03:42 -0700 Subject: [PATCH] Update documentation to reflect multiple triggers --- www/attributes/hx-trigger.md | 13 +++++++++++-- www/docs.md | 2 ++ 2 files changed, 13 insertions(+), 2 deletions(-) diff --git a/www/attributes/hx-trigger.md b/www/attributes/hx-trigger.md index 35c0d63e..ff5ca9b7 100644 --- a/www/attributes/hx-trigger.md +++ b/www/attributes/hx-trigger.md @@ -8,9 +8,10 @@ title: htmx - hx-trigger The `hx-trigger` attribute allows you to specify what triggers an AJAX request. A trigger value can be one of the following: -* An event name (e.g. "click") followed by a set of event modifiers +* An event name (e.g. "click" or "my-custom-event") followed by a set of event modifiers * A polling definition of the form `every ` * An SSE event declaration of the form `sse:` +* A comma-separated list of such events ### Standard Events @@ -74,6 +75,14 @@ Here is an example: This example establishes an SSE connection to the `event_stream` end point which then triggers a `GET` to the `/chatroom` url whenever the `chatter` event is seen. +### Multiple Triggers + +Multiple triggers can be provided, seprarated by commas. Each trigger gets its own options. +```html +
+``` +This example will load `/news` immediate on the page load, and then again with a delay of one second after each click. + ### Notes -* `hx-trigger` is not inherited \ No newline at end of file +* `hx-trigger` is not inherited diff --git a/www/docs.md b/www/docs.md index c9a5dd26..7bd05376 100644 --- a/www/docs.md +++ b/www/docs.md @@ -171,6 +171,8 @@ You can use these two attributes to implement a common UX pattern, [Active Searc This input will issue a request 500 milliseconds after a key up event if the input has been changed and inserts the results into the `div` with the id `search-results`. +Multiple triggers can be specified in the [hx-trigger](/attributes/hx-trigger) attribute, separated by commas. + #### [Special Events](#special-events) htmx provides a few special events for use in [hx-trigger](/attributes/hx-trigger):