Quick update - I pulled this off using getPage along with jQuery and no connector resource whatsoever. Simply used the url from the "next" item that getPage creates in its pagination in my ajax call.
Here's my getPage call, using a custom property set in getPage called, aptly, 'custom':
[[!getPage@custom? &pageNavOuterTpl=`[[+next]]` &pageNextTpl=`[[$customNextTpl]]` &element=`getResources` &limit=`5` &parents=`[[*id]]` &tpl=`blogPreview` &showHidden=`1` &initialOffset=`1` &processTVs=`1` &includeTVs=`1` &pageNavVar=`pagination`]]
I removed all pagination elements from the pageNavOuterTpl except for the next element, and then customized that element using the chunk (customNextTpl) below:
<span class="nextContainer">
<a class="loadMore" id="loadMore" href="[[+href]]">Load More</a>
<script>
$('#loadMore').click(function(){
// gets url from clicked button
var moreURL = $(this).attr('href');
// calls url to get new data
$.get( moreURL, function( data ) {
// inspects data for desired elements, so that whole page doesn't render
var newData = $(data).find('.page-content').children();
// inserts desired data after existing content
$(".page-content").append(newData);
});
// removes button and script so that there are not duplicates, as ajax call brought in a new button and script after loaded elements
$(this).parent().remove();
return false
});
</script>
</span>
I then included the
placeholder where I wanted my Load More button to appear.
In case you're curious - the initialOffset property in my getPage call is custom, and unrelated.
[ed. note: designcouch last edited this post 8 years, 5 months ago.]