CODEWITHSUNDEEP
javascriptjqueryajaxdjangodjango-endless-pagination
Jin
Jin

Reputation: 55

django-el(endless)-pagination not working with AJAX

I'm using django-el-pagination(Digg-style pagination) in my project, but the results don't appear to be using AJAX. I need to move the page without refreshing, but it seems that ajax is not working properly.

view.py

@page_template('dmmactress/actress_dev_page.html')
def actress_dev(request, id, extra_context=None):
    instance = get_object_or_404(ActressInfo_two, pk=id)
    moviesinfo = ActressinfoMovielist_co.objects.filter(actressinfo_id=id).prefetch_related('movielist').order_by('movielist')

    context = {
        'actresses': instance,
        'moviesinfo':moviesinfo,
    }

    if extra_context is not None:
        context.update(extra_context)

    return render(request, 'dmmactress/actress_dev.html', context)

actress_dev.html

        ........
        <thead>
        </thead>
        <tbody id="entries" class="endless_page_template">
        {% include page_template %}
        </tbody>
        ........

actress_dev_page.html

{% load el_pagination_tags %}
{% paginate moviesinfos %}
{% for movieinfo in moviesinfo %}
{{ movieinfo.movielist.movie_number|upper }}
{% endfor %}
{% get_pages %}
{% if pages.paginated %}
    {{ pages }}
{% endif %}

The result is the same as the default paging without using ajax. Also, when I click the "page" link, I'm taken to "/? page = 2", which includes refreshing the entire page and is not what I want to do.

And on the Chrome Console, no logs appear when the page reloads. (The js file has been successfully loaded.)

What am I doing wrong?

Upvotes: 0

Views: 908

Answers (1)

Kotlinboy
Kotlinboy

Reputation: 3915

You need to add the JS specified in the example in docs.

https://django-el-pagination.readthedocs.io/en/latest/javascript.html#javascript-pagination-on-scroll

from el_pagination.decorators import page_template

@page_template('myapp/entry_list_page.html')  # just add this decorator
def entry_list(request,
        template='myapp/entry_list.html', extra_context=None):
    context = {
        'entry_list': Entry.objects.all(),
    }
    if extra_context is not None:
        context.update(extra_context)
    return render(request, template, context)

In template

<h2>Entries:</h2>
<div class="endless_page_template">
    {% include page_template %}
</div>

{% block js %}
    {{ block.super }}
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="{{ STATIC_URL }}el-pagination/js/el-pagination.js"></script>
    <script>$.endlessPaginate({paginateOnScroll: true});</script>
{% endblock %}

Upvotes: 1

Related Questions