{"type":"rich","version":"1.0","provider_name":"Transistor","provider_url":"https://transistor.fm","author_name":"hx-pod","title":"The basics: hx-post","html":"<iframe width=\"100%\" height=\"180\" frameborder=\"no\" scrolling=\"no\" seamless src=\"https://share.transistor.fm/e/15ef8fe5\"></iframe>","width":"100%","height":180,"duration":501,"description":"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)","thumbnail_url":"https://img.transistorcdn.com/HDMx2j8NsKr2kaFUaB8csw69snTIab1k7QGpslBA4_0/rs:fill:0:0:1/w:400/h:400/q:60/mb:500000/aHR0cHM6Ly9pbWct/dXBsb2FkLXByb2R1/Y3Rpb24udHJhbnNp/c3Rvci5mbS85YzY0/NTY5OTExYjljY2Ri/MTFlZjk3NDhlZWE0/ODUxOC5qcGc.webp","thumbnail_width":300,"thumbnail_height":300}