Django and HTMX #8 - Infinite Scroll and the hx-push-url attribute

In this video, we will quickly look at the hx-push-url attribute, and how it can be used to change the URL when navigating to new sections of your app via HTMX requests.

We will also implement infinite scroll with HTMX, and will see how this can be done using utilities in Django (pagination, class-based-views and template loop helpers).

We'll also look at the django-htmx package's most basic use-case, and use that to help us return the correct template fragment based on the whether or not the request comes from HTMX! More info on this package can be found below in the further reading section.

Code will be available on the "Video #8" directory of the below Github repository.

▶️ Full Playlist:

📌 𝗖𝗵𝗮𝗽𝘁𝗲𝗿𝘀:
00:00 Intro
00:39 hx-push-url attribute
02:30 Infinite Scroll with HTMX
08:31 Adding the django-htmx package
14:38 Outro

☕️ 𝗕𝘂𝘆 𝗺𝗲 𝗮 𝗰𝗼𝗳𝗳𝗲𝗲:
To support the channel and encourage new videos, please consider buying me a coffee here:

𝗦𝗼𝗰𝗶𝗮𝗹 𝗠𝗲𝗱𝗶𝗮:

📚 𝗙𝘂𝗿𝘁𝗵𝗲𝗿 𝗿𝗲𝗮𝗱𝗶𝗻𝗴 𝗮𝗻𝗱 𝗶𝗻𝗳𝗼𝗿𝗺𝗮𝘁𝗶𝗼𝗻:

#django #htmx #python

[lordAvatar]

You're giving me homework? God damn it. Great series though, it should be way more popular.

[johnsolly]

Thank you for de-mystifying HTMX! I was able to follow along and implement this on my blog.

[MrBrunoPING]

I was looking forward to the next video in the series!

Thanks bro, I'm loving your HMTX content.

[samerelhamdo]

you see what happend if user refresh tha page or open the url in new tap ?

[nicenaija]

I’ll like to see ajax post with a toast

[lordAvatar]

The glitch at the end is actually 2 fold, maybe 3 fold. It loads all the film objects. And then it runs hx-get{% url 'film-list' %}?page=X at the end of that whole list. Which loads the films twice.

My dumb ass solve was to load one object in films_partial and pass a true context:

def films_partial(request):

films =

context = {
'films': films,
'film_partial': True
}

return render(request, 'partials/film-list.html', context)

Then modified film-list-elements.html to hide that newly generated element. Since it was the last element it automatically loaded as normal.

{% if forloop.last %}

<div hx-get="{% url 'film-list' %}?page={{ page_obj.number|add:1 }}" hx-trigger="revealed" hx-swap="afterend" hx-target="this"{% if film_partial %} hidden{% endif %}>
{% else %}

Now I wish i could return to the same location, could probably do it with JavaScript... of course why not just redirect to "films/" in views instead of doing all this? Again I'm learning maybe you can answer that?

[nevilleotieno]

Lovely tutorial. However, I do have one question, if you use hx-push-url which will update the URL, what would happen if the user refreshes the page? Wouldn't it reload the partial template which will be without the extended templates?

[mrmuranga]

another great piece..thanks..are you able to share how you have setup your vscode..i like that vscdoe shows you as you code along when you last changed/committed the line/area you are working on..

[mohammadshafayethaydar]

Thank you this requested tutorial. Please please fix lost position when i go back to film list page from film detail page.

[repotranstech]

I have a question?what if you are using htmx requests in all your get requests?

[flutterVerseMyanmar]

There is bugs. paginate_by=10 but I addedd 5 movies in my list.Therefore forloop.last is True and when I click last movie, movie detail rendered under movie list. I don't know how to solve it

[ulugbeknurjonov]

Can you show how make scroll with table html like total and subtotal ?

[yousefpahang]

I'm using push-url with true and it does everything :
hx-push-url="true"

[johnmcway]

You forgot to handle the last page. No get request needed for the last page.