itsscb/htmx
1
0
Fork 0
mirror of https://github.com/bigskysoftware/htmx.git synced 2025-10-02 15:25:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update documentation to reflect multiple triggers

Browse Source
This commit is contained in:
Robert Schroll 2020-05-23 18:03:42 -07:00
parent 2ad1202978
commit d69341a6dd
2 changed files with 13 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
www/attributes/hx-trigger.md
View File

@ -8,9 +8,10 @@ title: </> htmx - hx-trigger
The `hx-trigger` attribute allows you to specify what triggers an AJAX request. A trigger The `hx-trigger` attribute allows you to specify what triggers an AJAX request. A trigger
value can be one of the following: 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 <timing declaration>` * A polling definition of the form `every <timing declaration>`
* An SSE event declaration of the form `sse:<event name>` * An SSE event declaration of the form `sse:<event name>`
* A comma-separated list of such events
### Standard 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 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. 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
<div hx-get="/news" hx-trigger="load, click delay:1s"></div>
```
This example will load `/news` immediate on the page load, and then again with a delay of one second after each click.
### Notes ### Notes
* `hx-trigger` is not inherited * `hx-trigger` is not inherited

2
www/docs.md
View File

@ -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 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`. into the `div` with the id `search-results`.
Multiple triggers can be specified in the [hx-trigger](/attributes/hx-trigger) attribute, separated by commas.
#### <a name="special-events"></a> [Special Events](#special-events) #### <a name="special-events"></a> [Special Events](#special-events)
htmx provides a few special events for use in [hx-trigger](/attributes/hx-trigger): htmx provides a few special events for use in [hx-trigger](/attributes/hx-trigger):