summaryrefslogtreecommitdiffstatshomepage
path: root/www/examples/infinite-scroll.md
diff options
context:
space:
mode:
Diffstat (limited to 'www/examples/infinite-scroll.md')
-rw-r--r--www/examples/infinite-scroll.md14
1 files changed, 7 insertions, 7 deletions
diff --git a/www/examples/infinite-scroll.md b/www/examples/infinite-scroll.md
index 2cdc0fb8..2b71e080 100644
--- a/www/examples/infinite-scroll.md
+++ b/www/examples/infinite-scroll.md
@@ -2,16 +2,16 @@
layout: demo_layout.njk
---
-## Kutty Pattern: Infinite scroll
+## Htmx Pattern: Infinite scroll
The infinite scroll pattern provides a way to load content dynamically on user scrolling action.
Let's focus on the final row:
```html
-<tr kt-get="/contacts/?page=2"
- kt-trigger="revealed"
- kt-swap="afterend">
+<tr hx-get="/contacts/?page=2"
+ hx-trigger="revealed"
+ hx-swap="afterend">
<td>Agent Smith</td>
<td>void29@null.org</td>
<td>55F49448C0</td>
@@ -65,9 +65,9 @@ The last element of the results will itself contain the listener to load the *ne
// templates
function tableTemplate(contacts) {
- return `<table kt-indicator=".kutty-indicator"><thead><tr><th>Name</th><th>Email</th><th>ID</th></tr></thead><tbody>
+ return `<table hx-indicator=".htmx-indicator"><thead><tr><th>Name</th><th>Email</th><th>ID</th></tr></thead><tbody>
${rowsTemplate(1, contacts)}
- </tbody></table><center><img class="kutty-indicator" width="60" src="/img/bars.svg"></center>`
+ </tbody></table><center><img class="htmx-indicator" width="60" src="/img/bars.svg"></center>`
}
function rowsTemplate(page, contacts) {
@@ -78,7 +78,7 @@ The last element of the results will itself contain the listener to load the *ne
var c = contacts[i];
if (i == (contacts.length - 1)) {
- trigger_attributes = ` kt-get="/contacts/?page=${page + 1}" kt-trigger="revealed" kt-swap="afterend"`
+ trigger_attributes = ` hx-get="/contacts/?page=${page + 1}" hx-trigger="revealed" hx-swap="afterend"`
}
txt += "<tr" + trigger_attributes +"><td>" + c.name + "</td><td>" + c.email + "</td><td>" + c.id + "</td></tr>\n";