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