mirror of
https://github.com/bigskysoftware/htmx.git
synced 2025-09-30 06:21:19 +00:00
79 lines
2.4 KiB
Markdown
79 lines
2.4 KiB
Markdown
---
|
|
layout: layout.njk
|
|
title: </> htmx - hx-trigger
|
|
---
|
|
|
|
## `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
|
|
* A polling definition of the form `every <timing declaration>`
|
|
* An SSE event declaration of the form `sse:<event name>`
|
|
|
|
### Standard Events
|
|
|
|
A standard event, such as `click` can be specified as the trigger like so:
|
|
|
|
```html
|
|
<div hx-get="/clicked" hx-trigger="click">Click Me</div>
|
|
```
|
|
|
|
Standard events can also have modifiers that change how they behave. The modifiers are:
|
|
|
|
* `once` - the event will only trigger once (e.g. the first click)
|
|
* `changed` - the event will only change if the value of the element has changed
|
|
* `delay:<timing declaration>` - a delay will occur before an event triggers a request. If the event
|
|
is seen again it will reset the delay.
|
|
|
|
Here is an example of a search box that searches on `keyup`, but only if the search value has changed
|
|
and the user hasn't typed anything new for 1 second:
|
|
|
|
```html
|
|
<input name="q"
|
|
hx-get="/search" hx-trigger="keyup changed delay:1s"
|
|
hx-target="#search-results"/>
|
|
```
|
|
|
|
The response from the `/register` url will be appended to the `div` with the id `response-div`.
|
|
|
|
There are two special events that are non-standard that htmx supports:
|
|
|
|
* `load` - triggered on load (useful for lazy-loading something)
|
|
* `reveal` - triggered when an element is scrolled into the viewport (also useful for lazy-loading)
|
|
|
|
### Polling
|
|
|
|
By using the syntax `every <timing declaration>` you can have an element poll periodically:
|
|
|
|
```html
|
|
<div hx-get="/latest_updates" hx-trigger="every 1s">
|
|
Nothing Yet!
|
|
</div>
|
|
```
|
|
|
|
This example will issue a `GET` to the `/latest_updates` URL every second and swap the results into
|
|
the innerHTML of this div.
|
|
|
|
### SSE Events
|
|
|
|
If a parent node has declared an SSE source with the [`sse-src`](/attributes/sse-src) attribute,
|
|
an element can register to be triggered by a specific SSE event using the syntax `sse:<event name>`.
|
|
|
|
Here is an example:
|
|
|
|
```html
|
|
<div hx-sse-src="/event_stream">
|
|
<div hx-get="/chatroom" hx-trigger="sse:chatter">
|
|
...
|
|
</div>
|
|
</div>
|
|
```
|
|
|
|
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.
|
|
|
|
### Notes
|
|
|
|
* `hx-trigger` is not inherited |