I am using a template which has a 'LOAD MORE' button beneath a grid of entries (entries 1-10). Click this link loads addition content to the grid via AJAX from another page (which contains entries 11-20). There is also a second page which has entries 21-30. The code looks like this:
<div class="load-isotope align-center">
<a href="p2.html" class="sr-button"
data-related-grid="artefact-grid"
data-method="loadonclick">Load More</a>
<span class="load-message">No more items to show</span>
</div>
There is JS that will change the p2.html to p3.html when it is clicked, so the second time the button is click the 3rd set of entries is added.
I would like some help as to how to change the JS to make this work with craft pagination. I can add
{{ paginate.nextUrl ~ queryString }}
as the target URL which works for the first click (the link is rendering out as URL/section/p2 and the content is added via AJAX in the correct place) but I need this to change to /p3 etc with each click.
It seems as though the LOAD MORE function in the JS is mentioned in 2 places:
/* isotope load more function
------------------------------------------------*/
function isotopeLoadMore(grid,el,url,datas) {
el.parent(".load-isotope").addClass('loading');
if (url === '#' || !url) { url = srvars.ajaxurl }
var addData = ''; if (datas) { addData = { action:'sr_load_more', o:datas }; }
jQuery.ajax({
type:'POST', // this might lead to issues for html template
url:url,
data: addData,
dataType:"html",
error: function () {
el.parent(".load-isotope").addClass("disabled");
},
success: function(response) {
//console.log(response);
if (response) {
setTimeout(function(){
var items = jQuery( jQuery(response).find('#'+grid.attr('id')).html());
items.imagesLoaded(function(){
grid.append( items ).isotope( 'appended', items);
animateOnScroll(false);
// init video bg for appended items
if(jQuery().phatVideoBg) { grid.find('.videobg-section').phatVideoBg(); }
});
el.parent(".load-isotope").removeClass('loading');
},500);
} else {
el.parent(".load-isotope").addClass("disabled");
}
}
});
}
AND:
/* Load More isotope
------------------------------------------------*/
var loadMore = jQuery('.load-isotope:not(.disabled) a');
loadMore.click(function(){
var el = jQuery(this);
if(el.data("loadpage") === undefined) { el.data("loadpage","2"); }
else { el.data("loadpage", parseInt(el.data("loadpage"),10)+1); }
var related = el.data('related-grid');
var href = el.attr('href').replace("/2", '/'+el.data("loadpage"));
href = href.replace("2", el.data("loadpage"));
var datas = '';
if(el.data("options") !== undefined && el.data("options")) { datas = el.data('options').replace("paged=2", "paged="+el.data("loadpage")); }
isotopeLoadMore(jQuery('#'+related),el,href,datas);
return false;
});
Any help with this would be massively appreciated