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()}'
- 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