HTMX + Flask: Modern Python Web Apps, Hold the JavaScript Transcripts
Chapter: Feature 3: Infinite scroll
Lecture: Concept: Triggering another page as you scroll

Login or purchase this course to watch this video and the rest of the course contents.
0:00 Let's close out this chapter, this feature by reviewing how we rendered video results for a
0:05 single page and how we triggered the infinite scroll to get more pages down to the
0:10 browser. So first of all,
0:12 I really hope you thought that partial section was awesome.
0:16 I mean there's just so many use cases for these partial ideas.
0:19 in this one we're having our loop here, and actually we don't even have the HTML that
0:23 we saw. We put that all into a separate partial block.
0:26 But we just say for each video render that video with its HTML as we already
0:31 did. And this would show either all the videos on a single page or however
0:36 many were applied, but then we need our trigger.
0:39 So in order to add the trigger,
0:40 we come down here and we say add a div, or it could be anything,
0:43 it could be an image. It could be a hr you know,
0:46 it doesn't matter like put an HTML element here and have 3
0:50 htmx hx attributes. hx-get so we go back to the server,
0:56 feed_partial. Next page, gonna pass in you're currently on page 3 and if you need
1:01 more videos, go get 3 plus 1, or 4.
1:05 The most important part, the infinite scroll aspect here is on revealed.
1:09 We put it at the bottom, and then we say if it's revealed,
1:12 go get more. So that basically implements infinite scroll.
1:15 We scroll to the bottom, reveal is triggered, that gets us more.
1:19 The next one of these triggers goes probably off-screen. Down below
1:23 again, you scroll to it.
1:24 It's kind of like recursion and then finally an hx-swap.
1:27 So this whole section, this whole div here that contains this animated image,
1:32 like working image and so on.
1:34 All of that is going to be replaced by basically regenerating this whole page.
1:39 But with page equals plus 1. Final thing to do,
1:42 if you don't check that there are more pages,
1:45 you're going to end up in this weird cycle where you get to the end and
1:48 it's hitting the server and giving you errors and possibly even returns another one of these
1:52 triggers when you get this weird infinite loop type thing.
1:55 So be real careful to check the end the case,
1:57 right? If there's no more just don't show this trigger.
1:59 So it's really easy to do, but it's also easy to forget and that's it,
2:03 that's how we used htmx, our idea of partials and this whole trigger with revealed
2:09 to implement infinite scroll. I think it came out super,
2:12 super well. And again,
2:14 htmx plus this idea of partials comes out with such incredibly clean Python web apps
2:19 that it just makes me smile to look at it. It's really nice.