diff --git a/www/content/attributes/hx-trigger.md b/www/content/attributes/hx-trigger.md index 3512a08cf..9e1aadf47 100644 --- a/www/content/attributes/hx-trigger.md +++ b/www/content/attributes/hx-trigger.md @@ -11,6 +11,8 @@ value can be one of the following: ### Standard Events +Standard events refer to [web API events](https://developer.mozilla.org/en-US/docs/Web/API/Element#events) (e.g. click, keydown, mouseup, load). + A standard event, such as `click` can be specified as the trigger like so: ```html @@ -155,3 +157,4 @@ The AJAX request can be triggered via JavaScript [`htmx.trigger()`](@/api.md#tri * `hx-trigger` is not inherited * `hx-trigger` can be used without an AJAX request, in which case it will only fire the `htmx:trigger` event * In order to pass a CSS selector that contains whitespace (e.g. `form input`) to the `from`- or `target`-modifier, surround the selector in parentheses or curly brackets (e.g. `from:(form input)` or `from:closest (form input)`) +* A reset event in hx-trigger (e.g. hx-trigger="change, reset") might not work as intended, since HTMX builds its values and sends a request before the browser resets the form values. As a workaround, add a delay to let the browser reset the form before making the request (e.g. hx-trigger="change, reset delay:0.01s"). diff --git a/www/content/examples/active-search.md b/www/content/examples/active-search.md index 25dd22917..df72a464c 100644 --- a/www/content/examples/active-search.md +++ b/www/content/examples/active-search.md @@ -8,17 +8,17 @@ This example actively searches a contacts database as the user enters text. We start with a search input and an empty table: ```html -

- Search Contacts - - Searching... - +

+ Search Contacts + + Searching... +

- @@ -34,18 +34,17 @@ We start with a search input and an empty table:
``` -The input issues a `POST` to `/search` on the [`input`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event) event and sets the body of the table to be the resulting content. Note that the `keyup` event could be used as well, but would not fire if the user pasted text with their mouse (or any other non-keyboard method). +The input issues a `POST` to `/search` on the [`input`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event) event and sets the body of the table to be the resulting content. We add the `delay:500ms` modifier to the trigger to delay sending the query until the user stops typing. Additionally, we add the `changed` modifier to the trigger to ensure we don't send new queries when the user doesn't change the -value of the input (e.g. they hit an arrow key, or pasted the same value). +value of the input (e.g. they hit an arrow key, or pasted the same value). -Since we use a `search` type input we will get an `x` in the input field to clear the input. -To make this trigger a new `POST` we have to specify another trigger. We specify another trigger by using a comma to -separate them. The `search` trigger will be run when the field is cleared but it also makes it possible to override -the 500 ms `input` event delay by just pressing enter. +We can use multiple triggers by separating them with a comma, this way we add 2 more triggers: +- `keyup[key=='Enter']` triggers once enter is pressed. We use [event filters](/attributes/hx-trigger#standard-event-filters) here to check for [the key property in the KeyboardEvent object](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key). +- `load` in order to show all results initially on load. -Finally, we show an indicator when the search is in flight with the `hx-indicator` attribute. +Finally, we show an indicator when the search is in flight with the `hx-indicator` attribute. {{ demoenv() }} @@ -75,11 +74,11 @@ Search Contacts - diff --git a/www/content/extensions/preload.md b/www/content/extensions/preload.md index ed26f726c..fd0fda9fd 100644 --- a/www/content/extensions/preload.md +++ b/www/content/extensions/preload.md @@ -13,7 +13,7 @@ unused requests. Use this extension carefully! ## Install ```html - + ``` ## Usage @@ -35,6 +35,8 @@ giving your application a roughly 100-200ms head start on serving responses. See ``` +All preload requests include an additional `"HX-Preloaded": "true"` header. + ### Inheriting Preload Settings You can add the `preload` attribute to the top-level element that contains several `` or `hx-get=""` @@ -52,6 +54,15 @@ you preload many more resources than you need. ``` +### Preloading Forms + +The extension can preload some form elements if the form includes `hx-get` attribute or uses `method="get"`. The `preload` attribute can be added to the form or to some of its selected elements. Currently these form elements can be preloaded: +- `` will be preloaded as if the radio button was clicked and form submitted +- `` will be preloaded as if the checkbox was checked and form submitted +- `` will be preloaded as if the checkbox was unchecked and form submitted +- `` will be preloaded as if form was submitted + ### Preloading of Linked Images After an HTML page (or page fragment) is preloaded, this extension can also preload linked image resources. It will not @@ -115,6 +126,13 @@ trigger preloads as soon as an object has been processed by htmx. ``` +#### preload="always" + +By default, the extension will preload each element once. +If you would like to keep always preloading the element, you can add `preload="always"` attribute. +This can be useful if `hx-target` is not the element itself. +This attribute can be combined with other configuration attributes e.g. `preload="always mouseover"`. + ### About Touch Events To accommodate touchscreen devices, an additional `ontouchstart` event handler is added whenever you specify