Create an "AJAX Load More" button

Need Help
#1

Hey guys. I’m looking for a way to create a filterable “AJAX Load More” button. I would like to have multiple filters but that can come later.

How would I go about getting the next page of items and load them on the page with the content?

Any point in the right direction would be appreciated

#2

Hey @artistro08

Take a look at this script called auto-pager.js. It contains code that uses infinite/endless scrolling across a paginated set of records. You might be able to modify it to use a “Load More” button instead of the “inview” plugin that it comes with.

Here is a link:

This plugin is used as part of the “Clean theme”:

1 Like
#3

Good afternoon! How are you getting on with the Load More implementation?

#4

I ended up not doing it sadly. Was too complicated for me

#5

Hate to see this… October CMS is engineered for simplicity!

We’ve added the following to the documentation and this solution will be available in October CMS v3.2 (coming soon).

Load More Pagination

A load more button, sometimes called an infinite loader, is a method of displaying records in a stack instead of across multiple pages. The approach uses an AJAX partial to append the new content along with a self-destructing button.

For example, create a partial named load-more-posts.htm with the following contents.

{% set posts = blog.paginate(10) %}

<div>
    {% for post in posts %}
        <h2>{{ post.title }}</h2>
    {% endfor %}
</div>

{% if posts.hasMorePages %}
    <button
        data-request="onAjax"
        data-request-update="{ _self: '@' }"
        data-request-success="this.remove()"
        data-request-data="{ page: {{ posts.currentPage + 1 }} }"
        data-attach-loading>
        Load More
    </button>
{% endif %}

The button inside leverages a combination of AJAX data attributes to perform a self-update in append mode, passing the next page number as data and removing itself upon completion.

The partial should be rendered using {% ajaxPartial %} Twig tag.

url = "/blog"
==
{% ajaxPartial 'load-more-posts' %}
1 Like
#6

@daftspunky Great to see this!!!

1 Like