hx-trigger

The hx-trigger attribute allows you to specify what triggers an AJAX request. A trigger value can be one of the following:

Standard Events

A standard event, such as click can be specified as the trigger like so:

<div hx-get="/clicked" hx-trigger="click">Click Me</div>

Standard Event Filters

Events can be filtered by enclosing a boolean javascript expression in square brackets after the event name. If this expression evaluates to true the event will be triggered, otherwise it will be ignored.

<div hx-get="/clicked" hx-trigger="click[ctrlKey]">Control Click Me</div>

This event will trigger if a click event is triggered with the event.ctrlKey property set to true.

Conditions can also refer to global functions or state

<div hx-get="/clicked" hx-trigger="click[checkGlobalState()]">Control Click Me</div>

And can also be combined using the standard javascript syntax

<div hx-get="/clicked" hx-trigger="click[ctrlKey&&shiftKey]">Control-Shift Click Me</div>

Note that all symbols used in the expression will be resolved first against the triggering event, and then next against the global namespace, so myEvent[foo] will first look for a property named foo on the event, then look for a global symbol with the name foo

Standard Event Modifiers

Standard events can also have modifiers that change how they behave. The modifiers are:

Here is an example of a search box that searches on keyup, but only if the search value has changed and the user hasn't typed anything new for 1 second:

<input name="q" 
       hx-get="/search" hx-trigger="keyup changed delay:1s"
       hx-target="#search-results"/>

The response from the /register url will be appended to the div with the id response-div.

There are two special events that are non-standard that htmx supports:

Triggering via the HX-Trigger header

If you're trying to fire an event from HX-Trigger response header, you will likely want to use the from:body modifier. E.g. if you send a header like this HX-Trigger: my-custom-event with a response, an element would likely need to look like this:

  <div hx-get="/example" hx-trigger="my-custom-event from:body">
    Triggered by HX-Trigger header...
  </div>

in order to fire.

This is because the header will likely trigger the event in a different DOM hierarchy than the element that you wish to be triggered. For a similar reason, you will often listen for hot keys from the body.

Polling

By using the syntax every <timing declaration> you can have an element poll periodically:

<div hx-get="/latest_updates" hx-trigger="every 1s">
  Nothing Yet!
</div>

This example will issue a GET to the /latest_updates URL every second and swap the results into the innerHTML of this div.

If you want to add a filter to polling, it should be added after the poll declaration:

<div hx-get="/latest_updates" hx-trigger="every 1s [someConditional]">
  Nothing Yet!
</div>

Multiple Triggers

Multiple triggers can be provided, seprarated by commas. Each trigger gets its own options.

  <div hx-get="/news" hx-trigger="load, click delay:1s"></div>

This example will load /news immediate on the page load, and then again with a delay of one second after each click.

Via Javascript

The AJAX request can be triggered via Javascript htmx.trigger(), too.

Notes