#Infinite Scroll Django and HTMX

1 messages · Page 1 of 1 (latest)

serene wasp
#

Hi, I am trying to do an infinite scroll in django together with HTMX, I have the problem that it only loads 10 records (like the scroll doesn't keep loading the other results), could you help me to solve it, please.

view

   filterset_class = SourceWorkFilter
   queryset = SourceWork.objects.all().order_by('-started')
   template_name = 'source_work.html'
   paginate_by = 5

   def get(self, request, *args, **kwargs):
       self.filterset = self.get_filterset(self.get_filterset_class())
       self.object_list = self.filterset.qs
       context = self.get_context_data(filter=self.filterset,
                                       object_list=self.object_list)
   
       if request.htmx and 'HX-Boosted' not in request.headers:
           return render(request, "partials/source_work_list.html", context)
       return self.render_to_response(context)

   def get_context_data(self, **kwargs):
       context = super().get_context_data(**kwargs)
       context['filter'] = self.filterset
       return context'''

source_work html 
'''{% extends "base.html" %}
{% block content %}

<div class="container mx-auto px-4 py-8">
   <form method="get" class="mb-8">

       <button type="submit" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Filter</button>
   </form>
</div>

<!-- Source Works Grid -->
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4 px-4" id="sourceworks-grid">
   {% include "partia
ls/source_work_list.html" %}
</div>

<!-- Infinite scroll trigger -->
{% if page_obj.has_next %}
<div id="infinite-scroll-trigger"
    hx-trigger="revealed"
    hx-get="{% url 'source_works' %}?page={{ page_obj.next_page_number }}{% if filter.form.data %}&{{ filter.form.data.urlencode }}{% endif %}"
    hx-swap="beforeend"
    hx-target="#sourceworks-grid">
</div>
{% endif %}

{% endblock %} '''
hollow meteor
#

What does your "partials/source_work_list.html" contain ?

#

the element that should have hx-trigger="revealed" should be the last element that you're scrolling to, the moment it gets revealed on screen it will issue a trigger. Hence if your list isn't adding another trigger on the last element, you won't get further triggers.