itsscb/htmx
1
0
Fork 0
mirror of https://github.com/bigskysoftware/htmx.git synced 2025-09-29 14:04:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve HX-Trigger documentation

Browse Source 
* Fix URL for move from `X-HX-` prefix to `HX-` - not sure if this would need a redirect.
* Cover all three `HX-Trigger-*` headers in the page.
* Remove some redundant redundancy in the list of response headers
This commit is contained in:
Adam Johnson 2021-02-07 20:02:04 +00:00
parent ec57534150
commit 1c2733ec6f
4 changed files with 23 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
www/docs.md
View File

@ -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).
### <a name="request-operations"></a> [Request Order of Operations](#request-opeartions)
The order of operations in a htmx request are:

16
www/headers/x-hx-trigger.md → www/headers/hx-trigger.md
View File

@ -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`

2
www/migration-guide.md
View File

@ -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)

6
www/reference.md
View File

@ -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
</div>