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:06
single page and how we triggered the infinite scroll to get more pages down to the browser. So first of all,
0:13
I really hope you thought that partial section was awesome. I mean there's just so many use cases for these partial ideas.
0:20
in this one we're having our loop here, and actually we don't even have the HTML that we saw. We put that all into a separate partial block.
0:27
But we just say for each video render that video with its HTML as we already did. And this would show either all the videos on a single page or however
0:37
many were applied, but then we need our trigger. So in order to add the trigger, we come down here and we say add a div, or it could be anything,
0:44
it could be an image. It could be a hr you know, it doesn't matter like put an HTML element here and have 3
0:51
htmx hx attributes. hx-get so we go back to the server, feed_partial. Next page, gonna pass in you're currently on page 3 and if you need
1:02
more videos, go get 3 plus 1, or 4. The most important part, the infinite scroll aspect here is on revealed.
1:10
We put it at the bottom, and then we say if it's revealed, go get more. So that basically implements infinite scroll.
1:16
We scroll to the bottom, reveal is triggered, that gets us more. The next one of these triggers goes probably off-screen. Down below
1:24
again, you scroll to it. It's kind of like recursion and then finally an hx-swap.
1:28
So this whole section, this whole div here that contains this animated image, like working image and so on.
1:35
All of that is going to be replaced by basically regenerating this whole page. But with page equals plus 1. Final thing to do,
1:43
if you don't check that there are more pages, you're going to end up in this weird cycle where you get to the end and
1:49
it's hitting the server and giving you errors and possibly even returns another one of these triggers when you get this weird infinite loop type thing.
1:56
So be real careful to check the end the case, right? If there's no more just don't show this trigger.
2:00
So it's really easy to do, but it's also easy to forget and that's it,
2:04
that's how we used htmx, our idea of partials and this whole trigger with revealed to implement infinite scroll. I think it came out super,
2:13
super well. And again, htmx plus this idea of partials comes out with such incredibly clean Python web apps
2:20
that it just makes me smile to look at it. It's really nice.