hx-pod cover image

hx-pod

Htmx response headers: HX-Trigger, HX-Trigger-After-Swap, HX-Trigger-After-Settle

Jun 5, 2024
10:58

Use this response header to send event trigers to ANY client side browser event (javascript, htmx, custom, etc)

HX-Trigger - as soon as response received
HX-Trigger-After-Swap - after new html is swapped in
HX-Trigger-After-Settle - after new html is settled and processed by browser

  1. single event
    HX-Trigger:event

  2. multiple events
    HX-Trigger:event1, event2 

  3. single event with value
    HX-Trigger:{“event1”:”event 1 message”} 

  4. single events with key/value data
    HX-Trigger:{“event1:{“key1”:”value1,”key2:”value2”}}

  5. multiple events with key/value data 
    HX-Trigger:{“event1:{“key1”:”value1,”key2:”value2”}, “event2”:{“key1”:”value1,”key2:”value2”}}



Get the Snipd
podcast app

Unlock the knowledge in podcasts with the podcast player of the future.
App store bannerPlay store banner

AI-powered
podcast player

Listen to all your favourite podcasts with AI-powered features

Discover
highlights

Listen to the best highlights from the podcasts you love and dive into the full episode

Save any
moment

Hear something you like? Tap your headphones to save it with AI-generated key takeaways

Share
& Export

Send highlights to Twitter, WhatsApp or export them to Notion, Readwise & more

AI-powered
podcast player

Listen to all your favourite podcasts with AI-powered features

Discover
highlights

Listen to the best highlights from the podcasts you love and dive into the full episode