DocLister and AJAX Pagination

arhis77

Hello, can you help me how to implement an endless loading of news on modx evolution if DocLister is used to display news. So i mean instead of the usual pagination, which is implemented like this [+pages+], there would be a button "More news" with Ajax news loading.

Thanks in advance for your help,
Alexey

mplavala

This is an interesting problem, here is the solution I came up with.

Say that your list of news is located on the page http://example.com/news, then using standard pagination your second page will be on http://example.com/news?page=2 and so on. What I would do is create a different page with address http://example.com/news-json which would use Minimal template (only return [*content*]) and set Internet Media Type for this page as application/json. I would move the DocLister call from http://example.com/news to http://example.com/news-json and change your templates so that they return list of articles as valid JSON.

You can now add JS code to the original page http://example.com/news that makes request to http://example.com/news-json?page=X and displays the result. When the page is loaded you need to grab the first batch of articles from http://example.com/news-json and after the user reaches end of page use JS to grab the next batch of articles from http://example.com/news-json?page=2, then http://example.com/news-json?page=3 and so on.

Also don't forget to hide the page http://example.com/news-json from bots using robots.txt file or something similar.

If for some reason you really don't want to create the page http://example.com/news-json then there is more involved solution possible by making a Plugin that would do the DocLister call for you.