Skip to content

htmx forms and Astro View Transitions

FULL-STACK WEB DEVELOPMENT BOOTCAMP

2024 COHORT SIGNUPS END TOMORROW

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.

→ Read my Astro Tutorial
→ Read my HTMX Tutorial
  • Learn modern web development in my BOOTCAMP (SIGNUP END TOMORROW FEB 20, 2024)
  • THE VALLEY OF CODE (+ PRO), your web development manual
  • I wrote 15+ coding BOOKS, all available in THE VALLEY OF CODE PRO
  • Indie solopreneur internet business masterclass SOLO LAB (summer 2024)