htmx-demo/doc/htmx-ch04.md

HTMX chapter 4

Starter 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