HTMX and Astro View Transitions
When using both HTMX and Astro View Transitions, I had an event that fired on page load, so I added a astro:after-swap
event to handle doing the same thing I did after page load, but after a page transition:
<script>
const triggerFetchLastUpdated = () => {
const contentElement = document.getElementById('fetch-last-updated')
if (contentElement) {
htmx.trigger(contentElement, 'click', {})
}
}
htmx.onLoad(triggerFetchLastUpdated)
document.addEventListener('astro:after-swap', () => {
triggerFetchLastUpdated()
})
</script>
But, I hit a problem: I noticed my HTMX event didn’t fire after a transition.
Solution: make sure you call htmx.process()
after a page swap.
During the astro:after-swap
event:
<script>
const triggerFetchLastUpdated = () => {
const contentElement = document.getElementById('fetch-last-updated')
if (contentElement) {
htmx.trigger(contentElement, 'click', {})
}
}
htmx.onLoad(triggerFetchLastUpdated)
document.addEventListener('astro:after-swap', () => {
htmx.process(document.body)
triggerFetchLastUpdated()
})
</script>
You could also just have one event astro:page-load
and skip handling 2 different events (htmx.onLoad
and astro:after-swap
):
<script>
document.addEventListener('astro:page-load', () => {
const contentElement = document.getElementById('fetch-last-updated')
if (contentElement) {
htmx.process(document.body)
htmx.trigger(contentElement, 'click', {})
}
})
</script>
…but that’s slower as fires at the end of page navigation. astro:after-swap
instead fires immediately after the new page replaces the old page.
→ Download my free JavaScript Handbook!
THE VALLEY OF CODE
THE WEB DEVELOPER's MANUAL
You might be interested in those things I do:
- Learn to code in THE VALLEY OF CODE, your your web development manual
- Find a ton of Web Development projects to learn modern tech stacks in practice in THE VALLEY OF CODE PRO
- I wrote 16 books for beginner software developers, DOWNLOAD THEM NOW
- Every year I organize a hands-on cohort course coding BOOTCAMP to teach you how to build a complex, modern Web Application in practice (next edition February-March-April-May 2024)
- Learn how to start a solopreneur business on the Internet with SOLO LAB (next edition in 2024)
- Find me on X