HTMX + Flask: Modern Python Web Apps, Hold the JavaScript Transcripts
Chapter: Feature 3: Infinite scroll
Lecture: The htmx scroll trigger
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
Now that we have the ability to show just some of the videos. The next thing to do is to actually add the trigger.
0:08
So over here, this loop shows all the videos and then after it, we need to add some kind of thing that when we hit it in the page
0:16
that it is going to tell htmx go get more. I'm gonna make some interesting changes here.
0:21
We're going to start and say first we want a div and this div, it doesn't have to have any content, but soon as it appears it's, this will be the
0:31
thing that does the trigger. What we're actually going to put in here instead is this thing called bars.svg, and just let's hard code a width of
0:42
150 pixels. We also need to give it a class so that it can be worked on so. So it'll be an htmx-indicator. Right? So this thing will be shown.
0:53
And then as soon as the new videos come in, as soon as the new content that's being pulled in through,
0:58
infinite scroll comes in, it's going to replace this whole section, including the image. So you see how this goes,
1:04
What we're gonna do is we're gonna do some hx things. We're gonna do an hx-get, we can come over here and say feed/more_videos,
1:14
let's call it like that. And then we're also going to need to pass along what page we're on. So far,
1:20
we haven't had to track this because we had all of them, right? We said show every single one.
1:24
But what we couldn't find out is the first time through this is going to be page equals 1. The second time to is going to be page equals 2 and
1:32
whatnot. So this, this partial here is going to need to receive what page it's on and whatever page is on, we want to get the next page. Again,
1:47
we're gonna need a trigger. Right? This is, not this time clicked or anything like that. This one is going to be revealed.
1:54
So when, this is basically when it's shown on the page, scrolled into view, go with that. And then what is the swap? What are we going to do?
2:02
Well, exactly what I said, we're going to replace this entire fragment with whatever comes back from here and this is
2:09
going to be outerHTML. Finally to give this a little style, let's say this has a class.
2:19
Now this looks like a warning or an error, but it's just PyCharm not loving the Jinja inline Python, but it'll work just fine.
2:27
Okay, so this should work. Let's go and view it again. I'm gonna refresh Now we're right at the top of the page.
2:34
Oh yes, we do need to pass in that information. So here in the index where we're using it. Remember I called this when we passed in videos.
2:43
The very first time this is coming in. What page are we on? We are on page equals 1. And on the first page of the first request,
2:50
we're on page equals 1, but then subsequent ones, it'll be 2, 3, 4, 5 and so on as it iterates. Lets try Again. Here we go. Look at this.
2:59
Let's go to the top, actually. And I'll do a refresh down here, so we can reload that. Notice, There's just the CSS in the main page, got a 200.
3:10
Clear this out and then let's go to the side here. And I'll scroll down and as soon as we get past that electric,
3:16
Are Electric Cars Worse For The Environment? Myth Busted. Hang tight. Here it comes. Bam! See that, right? As we revealed that section,
3:26
GET more videos, page 2. All right. So now, obviously this is a 404 because we don't have the
3:32
server side bits, but that is what we needed to do over here. It turns out there's still one thing to do because this is always going to be
3:41
happening, and we don't want it to run. We don't want it to go and try to get more content if there is no
3:47
more content. So final bit that we're gonna need to do. If has, has_more_videos, then we're going to do this. But if we don't have more videos,
4:01
don't show the trigger that will try to get more videos. All right, let's go and say if self.has_more_videos, and we'll have the videos
4:11
we're showing now. But what we need to know is would there be more if they got to the end of that?
4:16
So we have to say something like the length of all the videos. Right? So how, this is the total number of videos, is that greater than end.
4:27
So if there's not any more or if there's 20 and this is 17-20 videos, right? This is gonna be False.
4:32
But if there's a 21st video past the 20th one, it should be good. And the final thing is we're also going to need to pass this over.
4:40
So let's wrap this around something like this, and we'll say has_more_videos equals that.
4:51
Passing this along, our view model or partial view should have it in place. Let's do one final test to make sure this is now working.
4:59
Go to the top, reset it. As we scroll in. Yes. Perfect. It was trying to get page two because it knows that there
5:06
are more. Again, the server is not implemented to do anything with that, but our HTML should be all good over here.
5:14
We're rendering the videos in the case there's more videos we're now showing the trigger.
5:18
But as soon as we get to the last page, the trigger goes away as well.