Django. Infinite Scroll on Scrollable Table is not working

I have an scrollable table in one of my templates defined like this:

<script src="{% static 'js/jquery.waypoints.min.js' %}"></script>
<script src="{% static 'js/infinite.min.js' %}"></script>
<script>
    var infinite = new Waypoint.Infinite({
        element: $('.infinite-container')[0],
    });
</script>

    ... more template ...

    <div id="table-div" style="overflow: scroll; height: 500px;">
        <table class="table" id="sale_orders" style="margin-top: 10px; font-size: 10px;">
            <form class="container py-3" method="GET">
                <thead>
                    <tr>
                        <th scope="col" class="order_header">Header 1</th>
                        <th scope="col" class="order_header">Header 2</th>
                        <th scope="col" class="order_header">Header 3</th>
                        <th scope="col" class="order_header">Header 4</th>
                        <th scope="col" class="order_header">Header 5</th>
                        <th scope="col" class="order_header">Header 6</th>
                        <th scope="col" class="order_header">Header 7</th>
                        <th scope="col" class="order_header">Header 8</th>
                        <th scope="col" class="order_header">Header 9</th>
                        <th scope="col" class="order_header">Header 10</th>
                        <th scope="col" class="order_header">Header 11</th>
                        <th scope="col" class="order_header">Header 12</th>
                    </tr>
                </thead>
                <tbody class="infinite-container">
                    {% for s in sales %}
                        <tr class="infinite-item">
                            <td scope="row"><span class="badge badge-info">{{s.number}}</span></td>
                            <td scope="row">{{s.client_name}}</td>
                            <td scope="row">{{s.comuna}}</td>
                            <td scope="row">{{s.get_total_weigth}}</td>
                            <td scope="row">{{s.get_total_cubic_cm}}</td>
                            <td scope="row">{{s.get_total_area}}</td>
                            <td scope="row">{{s.get_total_amount}}</td>
                            <td scope="row">{{s.get_total_items}}</td>
                            <td scope="row">{{s.product_fam}}</td>
                            <td scope="row">{{s.deliver_date|date:"d/m/Y"}}</td>
                            <td scope="row">
                                {% if s in loadedOrders %}
                                    <a class="btn btn-danger update-cart" data-load="{{initLoad.id}}" data-order="{{s.id}}" data-action="remove">
                                        <i class="fa fa-download" aria-hidden="true"></i>
                                    </a>
                                {% else %}
                                    <a class="btn btn-success update-cart" data-load="{{initLoad.id}}" data-order="{{s.id}}" data-action="add">
                                        <i class="fa fa-upload" aria-hidden="true"></i>
                                    </a>
                                {% endif %}
                            </td>
                            <td scope="row">
                                {% if s in loadedOrders %}
                                <a data-toggle="modal" data-target="#lines_info_{{s.id}}">
                                    <input type="button" name="partial_selection" value="Selección parcial" id="button{{s.id}}" class="btn btn-warning">
                                </a>
                                {% else %}
                                <a data-toggle="modal" data-target="#lines_info_{{s.id}}">
                                    <input type="button" name="partial_selection" value="Selección parcial" id="button{{s.id}}" class="btn btn-warning" disabled>
                                </a>
                                {% endif %}
                            </td>
                        </tr>
                    {% endfor %}
                    
                    {% if sales.has_next %}
                        <tr>
                            <td scope="row" colspan="12" style="text-align: center;">
                                <a class="infinite-more-link" href="?page={{ sales.next_page_number }}">More</a>
                            </td>
                        </tr>
                    {% endif %}
                </tbody>
            </form>
        </table>
    </div>

    ... more template ...

And my view is defined like this:

    def optimizer(request, pk):
        sids = []
        settings = Setting.objects.get(pk=1)
        trucks = Truck.objects.all()
        
        for s in SaleOrder.objects.filter(delivered=False):
            if s.get_total_items > 0:
                sids.append(s.id)
        
        sales = SaleOrder.objects.filter(pk__in=sids).order_by('-id')
        
        lines = SaleOrderLine.objects.filter(delivered=False, order_id__in=sids)
    
        min_load = settings.minimum_load_percentage
        min_value = settings.minimum_total_amount
        
        page = request.GET.get('page', 1)
        paginator = Paginator(sales, 20)
        try:
            sales = paginator.page(page)
        except PageNotAnInteger:
            sales = paginator.page(1)
        except EmptyPage:
            sales = paginator.page(paginator.num_pages)
        
        initLoad = Load.objects.get(pk=pk)
        loadedOrders = initLoad.order_ids.all()
        loadedLines = initLoad.line_ids.all()
    
        if request.GET.get('selected_lines') and request.GET.get('truck_selector'):
            lids = request.GET.getlist('selected_lines')
            alllines = SaleOrderLine.objects.filter(pk__in=lids, order_id__in=loadedOrders)
            for l in loadedLines:
                if l not in alllines:
                    initLoad.line_ids.remove(l)
    
            truck = Truck.objects.get(pk=request.GET.get('truck_selector'))
            initLoad.truck_id = truck
            initLoad.state = 'preview'
            initLoad.save()
            return redirect('optimizer', pk=initLoad.id)
    
        data = {
            'trucks': trucks,
            'sales': sales,
            'lines': lines,
            'initLoad': initLoad,
            'loadedOrders': loadedOrders,
            'step': initLoad.state,
        }
    
        return render(request, 'optimizer/main_optimizer.html', data)

So, I followed the tutorial posted on here, but when I get to the table bottom, nothing happens.

I don’t get why is not loading the rest of the data when I get to the ‘waypoint’. Any suggestion or new solution for this it would be appreciated.

Thanks.

Answer

Try putting your var infinite = new Waypoint script after the html <tbody class="infinite-container">

Currrently, when it is called, the element of that class hasn’t been created yet.