hx-pod

ALERT ALERT hx-on is changing tomorrow!...sort of1->2 guide:https://v2-0v2-0.htmx.org/migration-guide-htmx-1/hx-on attribute:https://htmx.org/attributes/hx-on/

What, you're too good for a regular javascript confirmation?Finehttps://htmx.org/examples/confirm/

Who gatekeeps the Gatekeepers? the coast guard?Thank you to rick @maverism for tweeting out the podcast!

What on earth are PUT PATCH and DELETE and why would I use them instead of POST?Well, which do you like better?A) <button hx-delete="/articles/1">B) <button hx-post="/articles/1/delete">

How to load a bunch of links to the after the page loads and place them anywhere you want with hx-swap-oobOn site:<div hx-get="/load-podcast-links" hx-trigger="load"></div>In response:<div id="placement-1" hx-swap-oob="true">Placement 1 text and link</div><div id="placement-2" hx-swap-oob="true">Placement 2 text and link</div><div id="placement-3" hx-swap-oob="true">Placement 3 text and link</div>.....

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.