hx-pod

This is a new idea: let your response decide its own target(s)! <div id="my-update-div" hx-swap-oob="true">Updated html</div><div id="my-update-div-2" hx-swap-oob="true">More updated html elsewhere on the page</div>

Uh oh. Your inputs are outside a <form> tag, what's to be done?

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)

You got your data back and your target, now where does it fit?

Is this really learning? It might be.

What would "tailwind but for javascript" feel like?

What if your browser could skip the json-processing step of an api?

Consider this: you have to add a fancy feature to a legacy app. Who you gonna call?