PLAY PODCASTS
The basics: hx-post
Season 1 · Episode 4

The basics: hx-post

hx-pod

January 17, 20248m 21s

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.

Show Notes

Want to use POST requests in ajax, and submit forms from anywhere on the page?

As promised in the episode, here are three ways to set up your CSRF token headers:

1. Like normal in your forms:

<input type="hidden" name="_token" value=""/>

 
(the regular html way works with htmx, of course)


2. Javascript

<script>
document.body.addEventListener('htmx:configRequest', (e) => {
    e.detail.headers['X-CSRFToken'] = '';
})
</script>

(add this to the bottom of your </body> so that EVERY request gets the right headers. I love this one!)


hx-headers

<div hx-post="/your-endpoint" hx-headers='{"X-CSRF-Token": "YourCSRFTokenHere"}'> 

<!-- Your content --> 

</div>

(add this attribute along with your hx-post)

Topics

htmx javascript programming laravel livewire minimalism coding html simplicity