| 1234567891011121314151617181920212223242526272829 |
- <!-- templates/index.html -->
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>HTMX JSON List</title>
- <script src="https://unpkg.com/[email protected]"></script>
- </head>
- <body>
- <h1>Item List</h1>
- <button hx-get="/api/clients" hx-trigger="click" hx-target="#item-list" hx-swap="innerHTML">
- Load Items
- </button>
- <ul id="item-list">
- <!-- Items will be populated here -->
- </ul>
- <script>
- document.addEventListener("htmx:afterRequest", function(event) {
- if (event.detail.path === "/api/clients") {
- const data = event.detail.xhr.response;
- const itemList = document.getElementById("item-list");
- itemList.innerHTML = data.map(item => `<li>${item.summary}</li>`).join("");
- }
- });
- </script>
- </body>
- </html>
|
