Triggers, forms, and feedback

Choose a custom trigger

Request on load, visibility, input, a custom event, or a timed interval when the feature genuinely requires it.

8 minute lesson

~~~

hx-trigger can request without a direct click or submit:

<section hx-get="/recommendations" hx-trigger="revealed">
  Loading recommendations…
</section>

Use load when a fragment is required immediately after initialization. Use revealed when scrolling the window should lazy-load it. For an element inside an overflow container, use intersect so Intersection Observer detects visibility correctly.

Polling uses a timing declaration:

<div hx-get="/jobs/42/status" hx-trigger="every 5s">
  Processing…
</div>

The server can return status 286 to stop HTMX polling when the job reaches a terminal state. Still avoid polling when a user action, normal refresh, SSE extension, or WebSocket extension better matches the update model.

Custom events keep the HTTP behavior visible in markup:

<div hx-get="/notifications"
  hx-trigger="notificationsChanged from:body"></div>

Another script or an HX-Trigger response header can emit notificationsChanged. The event connects features; the element still declares the route and response target.

Lesson completed