Search code examples
jquerypythondjangoinfinite-scrolldjango-endless-pagination

infinite scroll with django-endless-pagination


I am new to Django and Python. I am trying to implement infinite scroll on an html page but can't seem to figure it out. I am using the django-endless-pagination module and going for the twitter-style (with Pagination on scroll) from here

I've installed django-endless-pagination, added the request context processor in my settings.py file, and added endless_pagination in my installed_apps in my settings.py file.

I can paginate but can't seem to figure out how to do the infinite scroll.

My views.py is:

from endless_pagination.decorators import page_template
from models import PeoplePerson
from django.shortcuts import render_to_response, RequestContext

@page_template("people/entry_index_page.html") # just add this decorator
def entry_index(request, template="people/entry_index.html",
    extra_context=None):
    context = {
        'objects': PeoplePerson.objects.all(),
    }
    if extra_context is not None:
        context.update(extra_context)
    return render_to_response(template, context,
        context_instance=RequestContext(request))

entry_index.html is:

{% extends 'people/entry_index_page.html' %} {# is this line right????? #}
{% block js %}
   {% {{ block.super }} %}
    <script src="/mypathto/jquery.js" type="text/javascript" charset="utf-8"></script>
    <script src="/mypathto/endless.js" type="text/javascript" charset="utf-8"></script>
    <script src="/mypathto/endless_on_scroll.js" type="text/javascript" charset="utf-8"></script>

    <script type="text/javascript" charset="utf-8">
    var endless_on_scroll_margin = 20;
    </script>
{% endblock %}

<h2>Entries:</h2>
{% include page_template %}

and entry_index_page.html is:

{% load endless %}
{% paginate objects %}
{% for object in objects %}
 {{ object.name|upper }} <br>   
{% endfor %}
{% show_more %}

UPDATE: I was able to overcome the "'BlockNode' object has no attribute 'context'" error by adding "{% extends 'people/entry_index_page.html' %}" to entry_index.html. Not sure if this is the right way...I couldn't find it in the docs anywhere, just from another SO question asked.


Solution

  • I figured it out: 1. set my media_root and media_url and make sure javascript works