44 lines
No EOL
1.8 KiB
Markdown
44 lines
No EOL
1.8 KiB
Markdown
# HTMX
|
|
## Attributes
|
|
|
|
- `hx-[delete|get|patch|post|put]` - AJAX method to use
|
|
- `hx-swap`
|
|
- `innerHTML` - Default, replace hx-target inner html.
|
|
- `outerHTML` - Replace the hx-target itself
|
|
- `beforebegin` - Insert before hx-target
|
|
- `afterbegin` - Insert before hx-target first child
|
|
- `beforeend` - Insert after hx-target last child
|
|
- `afterend` - Insert response after hx-target
|
|
- `delete` - Deletes hx-target regardless of the response.
|
|
- `none` - No swap.
|
|
- `hx-target`: CSS selector for `hx-swap` action
|
|
- `hx-trigger`: comma-separated list of events triggering a request, often the default:
|
|
- On `input`, `textarea`, `select`: `change`
|
|
- On `form`: `submit`
|
|
- On all other elements: `click`
|
|
- Filters:
|
|
- in `[]` after the event name
|
|
- Example: `keyup[ctrlKey && key == 'l']` to catch CTRL-L
|
|
- Specify event source with `from:<extended CSS selector>`,
|
|
- defaults to current element
|
|
- Example: `from:body` to receive events from the whole body
|
|
- Complete spec: https://htmx.org/attributes/hx-trigger/
|
|
- `hx-include`:
|
|
- when `hx-post`-ing outside a form, specify which elements to include, as if they had been in a form along with the posting button
|
|
- supports matching on multiple comma-separated selectors
|
|
- `hx-vals`: value as a JSON string or JS dynamic value
|
|
- example: `hx-vals='{"state":"MT"}'`
|
|
- example: `hx-vals='js:{"state":getCurrentState()}'`
|
|
|
|
|
|
## Extended CSS selectors
|
|
|
|
- support multiple comma-separated selectors, but...
|
|
- `hx-target`: return first matching element from first selector (?)
|
|
- `hx-trigger from:` and `hx-include`: return first matching child
|
|
- relative selectors:
|
|
- `closest:` closest parent matching selector
|
|
- `(previous|next):`: previous or next element (not necessarily sibling) matching selector
|
|
- `find:` next child matching selector
|
|
- `this:` the current element
|
|
- |