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

[@lordAvatar]

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

[@MrBrunoPING]

I was looking forward to the next video in the series! Thanks bro, I'm loving your HMTX content.

[@bugbytes3923]

Thanks man!

[@johnsolly]

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

[@bugbytes3923]

Glad to hear that! I’m happy the videos could help

[@samerelhamdo1104]

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

[@seydinaoumarsamabaly1806]

GOD bless you man !!!

[@repotranstech]

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

[@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..

[@bugbytes3923]

Thanks again, I'm glad you are liking the videos. For that functionality, you can install the GitLens extension in VSCode. It's handy, especially when you're working in small teams!

[@nevilleotieno9638]

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?

[@iloveloam276]

I've just come across this issue. If you refresh you will get a 404 in the video. In my case I had to add an optional slug parameter (slug=none) to my view and then add path"/sampleurl/ to my URLS to actually create a view for the refresh. If I hadn't done this /sampleurl/sampleslug is in the address bar but obviously there is no view for this.

[@swiftscroll]

Perfect! Thanks a lot

[@bugbytes3923]

Thanks Tawfiq!

[@mohammadshafayethaydar1652]

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

[@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

[@LegionLeague]

You sir are amazing

[@bugbytes3923]

Thanks :D

[@alimansimov1929]

3:36 (sorun buradan qaynaqlana biler)

[@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 = UserFilms.objects.filter(user=request.user)[0:1] 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 %} {% 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?

[@nicenaija9952]

I’ll like to see ajax post with a toast

[@ulugbeknurjonov5226]

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

[@BeattapeFactory]

thank you

[@bugbytes3923]

You're welcome, thanks for commenting!

[@shavakano90]

what does your film.html file have?

[@bugbytes3923]

You can find the templates on Github: github.com/bugbytes-io/django-htmx/tree/master/Video%20%238/films/templates

[@yousefpahang]

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

[@johnmcway6120]

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

[@creator4666]

Nc work

[@bugbytes3923]

Cheers.