AI Workshop: learn to build apps with AI →
htmx: Triggers

Join the AI Workshop and learn to build real-world apps with AI. A hands-on, practical program to level up your skills.


Requests can be triggered in different ways.

The default is click, but you can fire a request on 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
14: Redirect after request
15: Send files using htmx.ajax()
16: Perform something on page load
17: Conditionally hide HTML elements based on HTMX request status
18: htmx + Alpine template tag
19: htmx, include hidden input fields outside of a form
20: htmx trigger request via JS event