Merge remote-tracking branch 'origin/master'

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"). 

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
-<h3> 
-  Search Contacts 
-  <span class="htmx-indicator"> 
-    <img src="/img/bars.svg"/> Searching... 
-   </span> 
+<h3>
+  Search Contacts
+  <span class="htmx-indicator">
+    <img src="/img/bars.svg"/> Searching...
+   </span>
 </h3>
-<input class="form-control" type="search" 
-       name="search" placeholder="Begin Typing To Search Users..." 
-       hx-post="/search" 
-       hx-trigger="input changed delay:500ms, search" 
-       hx-target="#search-results" 
+<input class="form-control" type="search"
+       name="search" placeholder="Begin Typing To Search Users..."
+       hx-post="/search"
+       hx-trigger="input changed delay:500ms, keyup[key=='Enter'], load"
+       hx-target="#search-results"
        hx-indicator=".htmx-indicator">
 
 <table class="table">
@@ -34,18 +34,17 @@ We start with a search input and an empty table:
 </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
 </span>
 </h3>
 
-<input class="form-control" type="search" 
-       name="search" placeholder="Begin Typing To Search Users..." 
-       hx-post="/search" 
-       hx-trigger="input changed delay:500ms, search" 
-       hx-target="#search-results" 
+<input class="form-control" type="search"
+       name="search" placeholder="Begin Typing To Search Users..."
+       hx-post="/search"
+       hx-trigger="input changed delay:500ms, keyup[key=='Enter'], load"
+       hx-target="#search-results"
        hx-indicator=".htmx-indicator">
 
 <table class="table">

www/content/extensions/preload.md

@@ -13,7 +13,7 @@ unused requests. Use this extension carefully!
 ## Install
 
 ```html
-<script src="https://unpkg.com/htmx-ext-preload@2.0.1/preload.js"></script>
+<script src="https://unpkg.com/htmx-ext-preload@2.1.0/preload.js"></script>
 ```
 
 ## Usage
@@ -35,6 +35,8 @@ giving your application a roughly 100-200ms head start on serving responses. See
 </body>
 ```
 
+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 `<a href="">` or `hx-get=""`
@@ -52,6 +54,15 @@ you preload many more resources than you need.
 </body>
 ```
 
+### 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:
+- `<input type="radio>">` will be preloaded as if the radio button was clicked and form submitted
+- `<input type="checkbox">` will be preloaded as if the checkbox was checked and form submitted
+- `<input type="checkbox" checked>` will be preloaded as if the checkbox was unchecked and form submitted
+- `<select>` will send multiple preload requests as if each unselected option was selected and form submitted
+- `<input type="submit">` 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.
 </body>
 ```
 
+#### 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