{"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?\nAs promised in the episode, here are three ways to set up your CSRF token headers:\n1. Like normal in your forms:<input type=\"hidden\" name=\"_token\" value=\"\"/> \n(the regular html way works with htmx, of course)\n2. Javascript<script>\ndocument.body.addEventListener('htmx:configRequest', (e) => {\n    e.detail.headers['X-CSRFToken'] = '';\n})\n</script>\n(add this to the bottom of your </body> so that EVERY request gets the right headers. I love this one!)\nhx-headers<div hx-post=\"/your-endpoint\" hx-headers='{\"X-CSRF-Token\": \"YourCSRFTokenHere\"}'> <!-- Your content --> </div>\n(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}