57291

Endless pagination loads entire page contents on scroll

I am trying to implement continuous pagination on scroll using django-endless-pagination.

The initial rendering of the page works fine. Once scrolled, however, the <strong>entire</strong> html page contents are loaded into the endless_page_template div, rather than the desired partial html content from the page_template. The result is sort of like looking into a mirror that is reflecting another mirror behind it. I believe that the queryset returned is correct because the pagination results are correct when not attempting to use "paginateOnScroll".

The relevant parts of my view are below. I'm using a CreateView because I have the comments form on the same page as the paginated comments.

class MyIndex(CreateView): form_class = CommentForm template_name = 'my/index.html' page_template = 'my/comments.html' def get_context_data(self, **kwargs): context = super(MyIndex, self).get_context_data(**kwargs) context.update({ 'comments': Comment.objects.order_by('-id').filter(parent=None), 'page_template': self.page_template, }) return context

The relevant parts of my/index.html template (main template)

<script src="{% static 'endless_pagination/js/endless-pagination.js' %}"></script> <script type="text/javascript"> $.endlessPaginate({ paginateOnScroll: true }); </script> <div class="endless_page_template"> {% include page_template %} </div>

The relevant parts of my/comments.html (page_template)

{% load endless %} {% paginate comments %} {% for comment in comments %} <span class="lead">{{ comment.name }}</span> {{ comment.message}} {% if not forloop.last %} <hr /> {% endif %} {% endfor %} <br /> <div class="row-fluid"> <div class="span8 offset2 pagination-centered"> {% show_more %} </div> </div>

Thanks!

Answer1:

I had the same issue, and fixed it by explicitly adding an is_ajax check in the views.py file, for example:

class MyIndex(CreateView): form_class = CommentForm template_name = 'my/index.html' page_template = 'my/comments.html' def get(self, request, *args, **kwargs): if request.is_ajax(): self.template_name = self.page_template return super(MyIndex, self).get(request, *args, **kwargs) def get_context_data(self, **kwargs): context = super(MyIndex, self).get_context_data(**kwargs) context.update({ 'comments': Comment.objects.order_by('-id').filter(parent=None), 'page_template': self.page_template, }) return context

You also might need to use render/render_to_response rather than returning the default get method though, it depends on how your page is structured.

Recommend

  • in solr is there an way to fetch all results from a query something like start=0&rows=* or rows=
  • Fatal Exception: main java.lang.RuntimeException: Unable to start activity a lot of bug
  • Change php variable based on javascript value
  • Is it possible to query Google Cloud Storage similar to using `ls` command in terminal?
  • How to loop through all rows in DataTables jQuery?
  • Is it possible to create an Attached Property on a Sealed XAML control class?
  • Django class view: __init__
  • How can I write a JS callback function that remembers the old value of a changing variable? [duplica
  • How to create a UIView for both portrait and landscape layout
  • Log Structured data to Elastic Search by using NLog 4.5 doesn't provide the ability to query in
  • How do I specify custom wording in a will_paginate view helper?
  • Redirect response to download file
  • SearchView WITHOUT ACTIONBAR [duplicate]
  • SSIS Designer is running VERY slowly
  • Access user's phone number on iOS 7
  • Web.config system.webserver errors
  • Is playing sound in Javascript performance heavy?
  • Should I or shouldn't I use the CachingConnectionFactory with hornetq 2.4.1
  • Do I need to reset a Perl hash index?
  • Use of this Javascript
  • Insert into database using onclick function
  • Knitr HTML Loop - Some HTML output, some R output
  • Can a Chrome extension content script make an jQuery AJAX request for an html file that is itself a
  • jQuery tmpl and DataLink beta
  • Function pointer “assignment from incompatible pointer type” only when using vararg ellipsis
  • 0x202A in filename: Why?
  • Cannot Parse HTML Data Using Android / JSOUP
  • SQL merge duplicate rows and join values that are different
  • Proper way to use connect-multiparty with express.js?
  • How to set the response of a form post action to a iframe source?
  • How get height of the a view with gone visibility and height defined as wrap_content in xml?
  • Getting Messege Twice Using IMvxMessenger
  • Java static initializers and reflection
  • File not found error Google Drive API
  • How does Linux kernel interrupt the application?
  • unknown Exception android
  • Observable and ngFor in Angular 2
  • Unable to use reactive element in my shiny app
  • git trying to push non-existent file … after clearing cache
  • How to load view controller without button in storyboard?