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, "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, so you can kind
0:13
of see where we're going and what to expect and just get a sense of what
0:17
htmx has to offer. I actually encourage you to go play with almost all of these examples to just get a sense of the scope here.
0:24
But let's look at "infinite scroll". Here we have the code that's going to do all the work. This is part of an HTML table,
0:31
so it has a table and then a table row. Table data, table data, table data. Now this is just the last row of that table and it has three hx tags
0:41
or attributes, it has the ability to get more. So contact/?page=2. Then the next one would be page three,
0:49
page four, page five, assuming there are more results to get. And then, when does this run? before we had,
0:55
when you click it, it would run like the "Click to Edit". This is when this element is revealed. So if we scroll down to the bottom,
1:03
so we see this last element of what we have so far, it's going to say, oh we gotta go load some more and then we're going to swap out what, after this.
1:12
So I'm gonna put another set of table rows after whatever we get back at contacts page two. Let's just see it in action.
1:19
So down here we have our agent smith void 10 11, 12 and so on. And if we go to the bottom you can see a
1:26
little working and then that's it. And then more working, and you can see we've done
1:31
a bunch of those requests and here you can see we start out with the initial state, and we have this
1:39
hx-indicator. This is the thing that at the top was showing this little spinner type thing for working, and we'll see that later.
1:49
When we did a give us the page 2, the parameters passed was well we need page 2 right, go get this URL and this is just the query string and the
1:57
results were all of this kind of stuff here and at the end it will have, I guess we're not sure yet, but it's going to have, let's go to the top here,
2:05
it will have that on the last of these rows, but instead it would say page 3 and page 4 and page 5.
2:12
So when we got to the bottom the first time it pulled page 2 and then page 3 and then page 4, you know,
2:20
and this example, it's just going to keep running. But eventually when you would have no more in the server,
2:24
the thing you would return would not have those elements on there. You're just returning the final set of results.
2:30
Assuming you're not Twitter or Facebook, that's basically infinite. But if there's an end, you just don't put that on the last response and that's it.
2:38
That's infinite scroll. Incredible, right?