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
Are you intimidated by Git? Can’t figure out merge vs rebase? Are you afraid of screwing up something any time you have to do something in Git? Do you rely on ChatGPT or random people’s answer on StackOverflow to fix your problems? Your coworkers are tired of explaining Git to you all the time? Git is something we all need to use, but few of us really master it. I created this course to improve your Git (and GitHub) knowledge at a radical level. Launching May 21, 2024. Join the waiting list!