diff --git a/www/docs.md b/www/docs.md index f3d67eff..17629d41 100644 --- a/www/docs.md +++ b/www/docs.md @@ -576,14 +576,16 @@ htmx includes a number of useful headers in requests: htmx supports some htmx-specific response headers: -* `HX-Push` - can be used to push a new URL into the browsers address bar -* `HX-Redirect` - can be used to do a client-side redirect to a new location +* `HX-Push` - pushes a new URL into the browser’s address bar +* `HX-Redirect` - triggers a client-side redirect to a new location * `HX-Refresh` - if set to "true" the client side will do a full refresh of the page -* `HX-Trigger` - can be used to trigger client side events, see the [documentation](/headers/x-hx-trigger) for examples. -* `HX-Trigger-After-Swap` - can be used to trigger client side events after the swap step. -* `HX-Trigger-After-Settle` - can be used to trigger client side events after the settle step. +* `HX-Trigger` - triggers client side events +* `HX-Trigger-After-Swap` - triggers client side events after the swap step +* `HX-Trigger-After-Settle` - triggers client side events after the settle step -### Request Order of Operations +For more on the `HX-Trigger` headers, see [`HX-Trigger` Response Headers](/headers/hx-trigger). + +### [Request Order of Operations](#request-opeartions) The order of operations in a htmx request are: diff --git a/www/headers/x-hx-trigger.md b/www/headers/hx-trigger.md similarity index 72% rename from www/headers/x-hx-trigger.md rename to www/headers/hx-trigger.md index 8a8533e2..379783a3 100644 --- a/www/headers/x-hx-trigger.md +++ b/www/headers/hx-trigger.md @@ -1,14 +1,20 @@ --- layout: layout.njk -title: htmx - HX-Trigger +title: htmx - HX-Trigger Response Headers --- -## `HX-Trigger` Response Header +## `HX-Trigger` Response Headers -The `HX-Trigger` response header can be used to trigger client side actions from a response to htmx. You can -trigger a single event or as many uniquely named events as you would like. +These response headers can be used to trigger client side actions on the target element within a response to htmx. You +can trigger a single event or as many uniquely named events as you would like. -To trigger a single event with no additional details you can simply send the header like so: +The headers are: + +* `HX-Trigger` - trigger events as soon as the response is received. +* `HX-Trigger-After-Settle` - trigger events after the [settling step](/docs/#request-operations). +* `HX-Trigger-After-Swap` - trigger events after the [swap step](/docs/#request-operations). + +To trigger a single event with no additional details you can simply send the event name in a header like so: `HX-Trigger: myEvent` diff --git a/www/migration-guide.md b/www/migration-guide.md index 2608f7ab..4c3f4122 100644 --- a/www/migration-guide.md +++ b/www/migration-guide.md @@ -129,7 +129,7 @@ See the [htmx documentation on hyperscript](https://htmx.org/docs/#hyperscript) | Intercooler | htmx | |-----------|-------------| -| `X-IC-Trigger` | `HX-Trigger`, `HX-Trigger-After-Settle`, `HX-Trigger-After-Swap`. See [documentation](https://htmx.org/headers/x-hx-trigger) for more details +| `X-IC-Trigger` | `HX-Trigger`, `HX-Trigger-After-Settle`, `HX-Trigger-After-Swap`. See [documentation](https://htmx.org/headers/hx-trigger) for more details | `X-IC-Refresh` | `HX-Refresh` | `X-IC-Redirect` | `HX-Redirect` | `X-IC-Script` | None. No direct equivalent functionality exists (TBC) diff --git a/www/reference.md b/www/reference.md index 89f8bd09..eaea7792 100644 --- a/www/reference.md +++ b/www/reference.md @@ -88,9 +88,9 @@ title: htmx - Attributes | `HX-Push` | pushes a new url into the history stack | `HX-Redirect` | can be used to do a client-side redirect to a new location | `HX-Refresh` | if set to "true" the client side will do a a full refresh of the page -| [`HX-Trigger`](/headers/x-hx-trigger) | allows you to trigger client side events, see the [documentation](/headers/x-hx-trigger) for more info -| [`HX-Trigger-After-Settle`](/headers/x-hx-trigger) | allows you to trigger client side events, see the [documentation](/headers/x-hx-trigger) for more info -| [`HX-Trigger-After-Swap`](/headers/x-hx-trigger) | allows you to trigger client side events, see the [documentation](/headers/x-hx-trigger) for more info +| [`HX-Trigger`](/headers/hx-trigger) | allows you to trigger client side events, see the [documentation](/headers/hx-trigger) for more info +| [`HX-Trigger-After-Settle`](/headers/hx-trigger) | allows you to trigger client side events, see the [documentation](/headers/hx-trigger) for more info +| [`HX-Trigger-After-Swap`](/headers/hx-trigger) | allows you to trigger client side events, see the [documentation](/headers/hx-trigger) for more info