AI Workshop: learn to build apps with AI →
htmx: Perform something on page load

Join the AI Workshop and learn to build real-world apps with AI. A hands-on, practical program to level up your skills.


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