Issue

This Content is from Stack Overflow. Question asked by southernegro

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.

Solution

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.

This Question was asked in StackOverflow by southernegro and Answered by SamSparx It is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.