Consider this button:
<button hx-get="/data"
hx-target="#data">
Load fresh data
</button>
<div id="data"></div>
When you click the button, any HTML returned from the GET /data HTTP request will be put inside the element that matches the selector #data (in this example our <div id="data"></div>).
I’ll use Astro to show a simple example, create a page with
<html lang='en'>
<head>
<script src='https://unpkg.com/htmx.org@1'></script>
</head>
<body>
<button
hx-get='/data'
hx-target='#data'>
Load fresh data
</button>
<div id='data'></div>
</body>
</html>
Now create a src/pages/data.astro and in there add
---
export const partial = true
---
<p>test response</p>
Clicking the Load fresh data button will insert <p>test response</p> into the #data div.
Note that all is happening without us having to write a single line of JavaScript.
htmx does all the JavaScript for us. We just describe what we want it to do. And it’s pretty flexible, so we can do a lot with it.
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 |