CODEWITHSUNDEEP
pythondjangoinfinite-scrolljquery-waypoints
Seif
Seif

Reputation: 759

Django infinite scroll goes through all pages at once without actually loading them

I'm implementing infinite scroll for my Django app using this excellent tutorial.

I want the app to load 9 articles then show the "loading..." sign and load 9 more articles.

However, what happens is that when the user hits the bottom, it shows the loading sign and nothing happens. On the terminal I can see that it "GET" requested all the pages at once like this:

[06/Jul/2017 18:22:26] "GET /?page=2 HTTP/1.1" 200 19124 [06/Jul/2017 18:22:27] "GET /?page=3 HTTP/1.1" 200 18774 [06/Jul/2017 18:22:27] "GET /?page=4 HTTP/1.1" 200 18772 [06/Jul/2017 18:22:28] "GET /?page=5 HTTP/1.1" 200 19031 [06/Jul/2017 18:22:28] "GET /?page=6 HTTP/1.1" 200 18965 [06/Jul/2017 18:22:28] "GET /?page=7 HTTP/1.1" 200 18676 [06/Jul/2017 18:22:28] "GET /?page=8 HTTP/1.1" 200 18866 [06/Jul/2017 18:22:28] "GET /?page=9 HTTP/1.1" 200 19094 [06/Jul/2017 18:22:28] "GET /?page=10 HTTP/1.1" 200 18750

This is the code in views:

def context_generator(request, title, category):
    """made this function because views are very similar"""
    context_dict={}

    if(category == "index"):
        articles_list = Article.objects.order_by('-pub_date')
    else:
        articles_list = Article.objects.filter(category=category).order_by('-pub_date')

    page = request.GET.get('page', 1)
    paginator = Paginator(articles_list, 9)

    try:
        articles = paginator.page(page)
    except PageNotAnInteger:
        articles = paginator.page(1)
    except EmptyPage:
        articles = paginator.page(paginator.articles_list)

    context_dict['articles'] =  articles
    context_dict['title'] = title

    return context_dict

def index(request):
    return render(request, 'app_name/index.html', context_generator(request, "page title", "index"))

This is index.html:

{% block body_block %}

    <div class="container infinite-container">

         {% for article in articles %}
          <!-- render articles -->
         {% endfor %}

    </div>


    {% if articles.has_next %}
        <a class="infinite-more-link" href="?page={{ articles.next_page_number }}">More</a>
    {% endif %}


    <div class="loading" style="display: none;">
      Loading...
    </div>

{% endblock %}

This script is in base.html:

<script>
  var infinite = new Waypoint.Infinite({
    element: $('.infinite-container')[0],
    onBeforePageLoad: function () {
    $('.loading').show();
    },
    onAfterPageLoad: function ($items) {
    $('.loading').hide();
    }
  });
</script>

These imports are in the base.html header:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="{% static 'js/jquery.waypoints.min.js' %}"></script>
<script src="{% static 'js/infinite.min.js' %}"></script>

Upvotes: 0

Views: 1771

Answers (1)

Seif
Seif

Reputation: 759

it was because I forgot to add this class to each article div:

infinite-item

so it has to be like this:

<div class="container infinite-container">

     {% for article in articles %}
          <div class="article col-md-4 col-lg-4 col-xs-12 infinite-item"></div>

     {% endfor %}

Upvotes: 1

Related Questions