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
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”:
Good afternoon! How are you getting on with the Load More implementation?
I ended up not doing it sadly. Was too complicated for me
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).
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' %}
Thanks for this idea! Works nicely, however, I’m struggling to combine it with the filters - would you have any solution for slightly tweaked partial?
{% if query.category %}
{% set posts = blog.whereRelation('category', 'id', query.category) %}
{% endif %}
{% set posts = blog.paginate(10) %}
whilst ‘query’ is being passed from the AJAX form on the page the only preserved variable is page, so all the filters reset and partial is only showing the second page of all the unfiltered posts.
<button
data-request="onAjax"
data-request-update="{ products/filtered-display: '#products-display' }" {# _self or __SELF__ doesn't want to work in my case either, but thay may be because I'm using partial, not ajaxPartial #}
data-request-success="this.remove()"
data-request-data="{ page: {{ display.currentPage + 1 }}, query: {{ query }} }"
data-attach-loading>
Load More
</button>
The above gives me array to string conversion error, but {{ query | json_decode() }} doesn’t help as variable becomes ‘null’. Also there seem to be no | json_encode() in twig, so even if the data was passed correctly I may not be able to use it easily.
Is there any pre-made way of displaying the pagination for the partials updated with AJAX form?
Something like:
{{ posts.render | raw }}
but for partials would be absolutely perfect!
My first guess would be to use the built-in {{ dd() }} function to see what it’s returning. that would at least get you in the right direction as to why it’s doing that.
Why not use ajaxPartial? It could be related.
I’ve faced this issue a couple times now - ajaxPartial tag doesn’t seem to be recognisable
I have {% framework extras %} in my layout file, tried with {% framework extras turbo %} as well - same result
and once I close the if statement:
Am I missing something there?
Also, I’ve tried {{ dd() }} and {{ dump() }} Artistro - the actual data is just replaced with ‘null’
What CMS version are you using? If ajaxPartial is missing, it suggest you may not be using a compatible version. This feature was added in v3.2: Release Note 33: October CMS 3.2 - Page Finder Release - October CMS
That was the case indeed; apologies for the late replay - it’s funny how long it takes to get authorization to perform the software update from the infrastructure people 
I’m still facing one issue;
Initial version works perfectly - leaving previous/next page code if anyone will need it in the future
{% if wholesalers.currentPage > 1 %}
<button
class="cta-btn-More"
data-request="onAjax"
data-request-update="{ _self: 'true' }"
data-request-success="this.remove()"
data-request-data="{ page: {{ wholesalers.currentPage - 1 }} }"
data-attach-loading>
< Previous Page
</button>
{% endif %}
{% if wholesalers.hasMorePages %}
<button
class="cta-btn-More"
data-request="onAjax"
data-request-update="{ _self: 'true' }"
data-request-success="this.remove()"
data-request-data="{ page: {{ wholesalers.currentPage + 1 }} }"
data-attach-loading>
Next Page >
</button>
{% endif %}
Issue occurs once the filters are pre-applied; I have upper partial with the form
<form accept-charset="UTF-8" data-request="onWholesalersSearch" data-request-update="'wholesalers/display': '#wholesalers-display'">
And once it’s submitted ‘Next Page’ button is alerting the following:
The partial ‘_self’ is not found.
I’ve tried multiple different versions;
introducing the ‘in-between’ partial that for some reason becomes one with the ajaxPartial
Performing all the searches on page level - for some reason I keep losing ‘wholesalers’ value once the page gets updated
Even moving everything to the page and using only ajaxPartial doesn’t seem to do the trick…
Any ideas of how I could combine the filters with self updating pagination? What’s worth mentioning is the fact that some queries are performed in PHP section, since there is distance based on postcode lookup
Does anyone have a working version of the form filtering data that they could kindly share?
When using ajaxPartial, you should see this in the markup
<div data-ajax-partial="contact-form">
... Contents go here ...
</div>
Inside that div the _self reference will resolve to that partial name. Check to make sure that there is an element with the data-ajax-partial tag on it.