htmx: Perform something on page load

Join the AI Workshop to learn more about AI and how it can be applied to web development. Next cohort February 1st, 2026

The AI-first Web Development BOOTCAMP cohort starts February 24th, 2026. 10 weeks of intensive training and hands-on projects.


Use htmx.onLoad()

Simple example:

<script src='https://unpkg.com/htmx.org@1.9.6'></script>
<p class='mt-5 mb-0' id='last-updated'>Last updated ...</p>
<button
  id='fetch-last-updated'
  hx-post='/partials/last-updated/'
  hx-trigger='click'
  hx-target='#last-updated'
  hx-swap='innerHTML'>
</button>

<script>
  htmx.onLoad(function (el) {
    const contentElement = document.getElementById('fetch-last-updated')
    htmx.trigger(contentElement, 'click', {})
  })
</script>

Lessons in this unit:

0: Introduction
1: Why htmx
2: The core idea of htmx
3: Installing htmx
4: Doing a GET request
5: Swap
6: POST request
7: Targets
8: Loading indicator
9: Confirming actions, and prompts
10: Triggers
11: Request headers
12: Response headers
13: Events
14: Redirect after request
15: Send files using htmx.ajax()
16: ▶︎ Perform something on page load
17: Conditionally hide HTML elements based on HTMX request status
18: htmx + Alpine template tag
19: htmx, include hidden input fields outside of a form
20: htmx trigger request via JS event