HTMX + Django: 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. Click to edit and it's fantastic. It's actually one that we're going to work with.
0:06
Let's look at another one that we're eventually going to add to our video app. I do want to give you a sense of walking through these
0:13
so you can kind of see where we're going and what to expect and just get a sense of what HTMX has to offer.
0:19
I actually encourage you to go play with almost all of these examples to just get a sense of the scope here, but let's look at infinite scroll.
0:26
Here we have the code that's going to do all the work.
0:29
This is part of an HTML table, so it has a table and then a table row, table data, table data, table data.
0:36
Now this is just the last row of that table and it has three HX tags or attributes. It has the ability to get more, so contact slash page equals two,
0:48
then the next one would be page three, page four, page five, assuming there are more results to get.
0:53
And then when does this run? Before we had when you click it, it would run, like the click to edit. this is when this element is revealed.
1:01
So if we scroll down to the bottom so we see this last element of what we have so far, it's going to say, ""Oh, we got to go load some more.
1:08
And then we're going to swap out what after this. So we're going to put another set of table rows after it, whatever we get back at contacts page 2.
1:18
Let's just see it in action. So down here we have our agent Smith, void 10, 11, 12, and so on.
1:25
And if we go to the bottom, you can see it's all working.
1:27
And then that's it. And then more working and you can see we've done a bunch of those requests.
1:34
Here you can see we start out with the initial state. And we have this HX indicator. This is
1:41
the thing that at the top was showing this little spinner type thing for working. We'll see that
1:47
later. When we did a give us the page two, the parameters pass was what we need page two, right? go get this URL and this is just the query string.
1:56
And the results were all of this kind of stuff here. And at the end, it will have, guess we're not showing it, but it's gonna have,
2:04
let's go to the top here, it'll have that on the last of these rows. But instead it'll say page three and then page four and page five.
2:12
So when we got to the bottom the first time, it pulled page two and then page three and then page four.
2:20
You know, in this example, it's just gonna keep running.
2:22
But eventually when you had no more in the server, the thing you would return would not have those elements on there.
2:28
You just return the final set of results. Assuming you're not Twitter or Facebook, that's basically infinite.
2:34
But if there's an end, you just don't put that on the last response. And that's it. That's infinite scroll. Incredible, right?