Skip to content

htmx forms and Astro View Transitions

New Course Coming Soon:

Get Really Good at Git

I already wrote about htmx and Astro View Transitions.

But I’ve got a new tip to work with forms.

Had this issue today with a form controlled by htmx (htmx sends a POST request when this form is submitted) that was working fine until I enabled View Transitions on the site (built with Astro).

I was POSTing data to a URL like /api/project/:project_id and expected the returned HTML of this POST request to be shown in the place I wanted to, but turns out View Transitions automatically trigger a page transition and that reloads the current page:

So basically my page refreshed before htmx could handle the response from the server. I was a bit confused until I analyzed carefully my requests log server-side.

Adding data-astro-reload to the forms fixed the problem.

Are you intimidated by Git? Can’t figure out merge vs rebase? Are you afraid of screwing up something any time you have to do something in Git? Do you rely on ChatGPT or random people’s answer on StackOverflow to fix your problems? Your coworkers are tired of explaining Git to you all the time? Git is something we all need to use, but few of us really master it. I created this course to improve your Git (and GitHub) knowledge at a radical level. A course that helps you feel less frustrated with Git. Launching Summer 2024. Join the waiting list!
→ Read my Astro Tutorial on The Valley of Code
→ Read my HTMX Tutorial on The Valley of Code

Here is how can I help you: