HTMX + Flask: Modern Python Web Apps, Hold the JavaScript Transcripts
Chapter: Exploring the examples on htmx.org
Lecture: Example: Infinite scroll
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
We've already seen one of the examples over here,
0:02
"Click to Edit", and it's fantastic.
0:04
It's actually one that we're going to work with.
0:05
Let's look at another one that we're eventually going to add to our video app.
0:09
I do want to give you a sense of walking through these, so you can kind
0:12
of see where we're going and what to expect and just get a sense of what
0:16
htmx has to offer. I actually encourage you to go play with almost all of these
0:21
examples to just get a sense of the scope here.
0:23
But let's look at "infinite scroll". Here
0:25
we have the code that's going to do all the work.
0:28
This is part of an HTML table,
0:30
so it has a table and then a table row.
0:33
Table data, table data, table data.
0:35
Now this is just the last row of that table and it has three hx tags
0:40
or attributes, it has the ability to get more.
0:44
So contact/?page=2.
0:47
Then the next one would be page three,
0:48
page four, page five, assuming there are more results to get. And then, when
0:53
does this run? before we had,
0:54
when you click it, it would run like the "Click to Edit". This is when
0:58
this element is revealed. So if we scroll down to the bottom,
1:02
so we see this last element of what we have so far,
1:05
it's going to say, oh we gotta go load some more and then we're going
1:08
to swap out what, after this.
1:11
So I'm gonna put another set of table rows after whatever we get back at contacts
1:15
page two. Let's just see it in action.
1:18
So down here we have our agent smith void 10 11,
1:22
12 and so on. And if we go to the bottom you can see a
1:25
little working and then that's it. And then more working, and you can see we've done
1:30
a bunch of those requests and here you can see we start out with the initial
1:34
state, and we have this
1:38
hx-indicator. This is the thing that at the top was showing this little
1:43
spinner type thing for working, and we'll see that later.
1:48
When we did a give us the page 2, the parameters passed was well we need page 2
1:52
right, go get this URL and this is just the query string and the
1:56
results were all of this kind of stuff here and at the end it will have,
2:00
I guess we're not sure yet,
2:02
but it's going to have, let's go to the top here,
2:04
it will have that on the last of these rows, but instead it would say page
2:10
3 and page 4 and page 5.
2:11
So when we got to the bottom the first time it pulled page 2 and then
2:16
page 3 and then page 4, you know,
2:19
and this example, it's just going to keep running.
2:21
But eventually when you would have no more in the server,
2:23
the thing you would return would not have those elements on there.
2:27
You're just returning the final set of results.
2:29
Assuming you're not Twitter or Facebook,
2:32
that's basically infinite. But if there's an end,
2:34
you just don't put that on the last response and that's it.
2:37
That's infinite scroll. Incredible, right?