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.