PLAY PODCASTS
Htmx response headers: HX-Trigger, HX-Trigger-After-Swap, HX-Trigger-After-Settle
Season 3 · Episode 14

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

hx-pod

June 5, 202410m 58s

Audio is streamed directly from the publisher (media.transistor.fm) as published in their RSS feed. Play Podcasts does not host this file. Rights-holders can request removal through the copyright & takedown page.

Original episode pageView transcript

Show Notes

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”}}



Topics

htmx javascript programming laravel livewire minimalism coding html simplicity
← All episodes of hx-pod