HTMX + Flask: Modern Python Web Apps, Hold the JavaScript Transcripts
Chapter: Exploring the examples on htmx.org
Lecture: Example: Infinite scroll

Learn more about this course
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?