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.
I wrote 17 books to help you become a better developer, download them all at $0 cost by joining my newsletter
JOIN MY CODING BOOTCAMP, an amazing cohort course that will be a huge step up in your coding career - covering React, Next.js - next edition February 2025