HTMX + Django: Modern Python Web Apps, Hold the JavaScript Transcripts
Chapter: Feature 3: Infinite scroll
Lecture: Modifying the feed template
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
As in prior lessons, I'm going to start by editing the HTML. I need to make changes to the feed page, so let's open that up.
0:11
This block here needs to become a results block that is fed dynamically, so I'm going to move it into a partial. First, let me create the new partial.
0:23
This chunk doesn't have to change. It's still going to be feeding videos, just not all of them.
0:40
What is needed here is something that detects when the user reaches the bottom of the page.
0:45
You do that with HXTrigger, but with an event you haven't seen before. It's called revealed. Let me show it to you.
0:55
I only want this block to appear if there are more videos to fetch, so the whole thing starts by being inside of this if condition.
1:04
As I mentioned, I'm using HXTrigger. Instead of using KeyUp as the event, this time I'm using a special HTML event called Revealed.
1:14
This fires the HXGet when the marked tag shows up on the screen. If it's off screen, nothing happens, but when the user scrolls, revealing the tag,
1:24
the HXGet fires. The HXGet calls the same view as the page, but appends a query parameter indicating the page number.
1:35
I'm going to use a Django paginator to divvy up the video list, so that page number will indicate which chunk of the result list to return.
1:44
And that's pretty much all I've got to do on the HTML side. Since I removed the code that renders the results from the feed page, I'll just quickly
1:52
go back and insert an include for when the page loads. That's the HTML. Now time for the view.