htmx: Triggers

Requests can be triggered in different ways.

The default is click, but you can fire a requests upon any browser-generated event, like mouseenter or keyup or even a specific keypress.

You do that using hx-trigger:

<button 
  hx-get='/data' 
  hx-swap='innerHTML' 
  hx-target='#data'
  hx-trigger='mouseenter'>
  Load fresh data
</button>

It doesn’t have to be an event.

htmx offers other ways to fire events, like polling. Use every 5s to fire a GET request every 5 seconds: hx-trigger='every 5s'

Or use load to load just once after 10 seconds: hx-trigger='load delay:10s'

Lessons in this unit:

0: Introduction
1: Why htmx
2: The core idea of htmx
3: Installing htmx
4: Doing a GET request
5: Swap
6: POST request
7: Targets
8: Loading indicator
9: Confirming actions, and prompts
10: ▶︎ Triggers
11: Request headers
12: Response headers
13: Events
Want to learn more? Check out our courses