Day 2: Trigger Happy

Welcome to Day 2. By default, hx-get triggers on click for buttons and change for inputs. But you can control this with hx-trigger.

Common Triggers

Mouse Enter

<div hx-get="/mouse-entered" hx-trigger="mouseenter">
    Hover me!
</div>

Load (Lazy Loading)

Great for fetching data components after the initial page paint.

<div hx-get="/heavy-data" hx-trigger="load">
    <img src="/spinner.gif" alt="Loading..." />
</div>

Revealed (Infinite Scroll)

Triggers when the element enters the viewport.

<div hx-get="/next-page" hx-trigger="revealed">
    Load more...
</div>

Modifiers

You can tune triggers to avoid spamming the server.

Delay

Wait until the user stops doing the action for X time. Perfect for search inputs.

<input 
    type="text" 
    name="q"
    hx-get="/search" 
    hx-trigger="keyup changed delay:500ms"
    hx-target="#results"
/>

Throttle

Don’t allow requests more than once every X time.

<div hx-get="/updates" hx-trigger="mousemove throttle:2s">
    Tracking...
</div>

Challenge for Day 2

1. Design a “Live Search” input.
2. It should trigger on keyup.
3. It should only trigger if the value changed.
4. It should wait 500ms (delay:500ms) to stop jitter.

Solution:

<input 
    type="search" 
    name="query"
    placeholder="Search users..."
    hx-post="/search" 
    hx-trigger="keyup changed delay:500ms"
    hx-target="#search-results"
/>
<div id="search-results"></div>

You are now controlling when things happen. Tomorrow: Where they go.