load more posts ajax - JF Vihrea - Joomla Templates

Welcome, Guest

TOPIC: load more posts ajax

load more posts ajax 02 Feb 2019 17:05 #11395

Hi, I've tried to modify the template a bit, so more k2 articles are loaded by an ajax "load more" button.
There is a post in the k2 forums about how to achieve that for k2 posts, but it needed some modifications in order to work with isotope. There was also a small error that was causing more problems to isotope than default k2. At least I think I've fixed it (I have no clue aoy jquery).

so you just add

 
<!-- AJAX load more btn --->
		<div class="loadmorewrapper">
		<a id="btn-show-more" href="<?php echo JRoute::_('&start=' . ( ($this->pagination->pagesCurrent) * $this->pagination->limit) ); ?>"><span class="icone"><i class="fas fa-plus-circle"></i></span></a>
		</div>

before the closing </div> in category.php - in my case in the portfolio template.

Then after the closing </div> I've added

 
 
$ = jQuery;
var url = '?start=';
var itemsToFetch = 5;
var cursor = itemsToFetch;
 
var newsContainer = 'isotope';
var buttonEl = $('#btn-show-more');
 
buttonEl.on ('click', function(evt){
evt.preventDefault();
 
$.get( url + cursor, function( data ) {
var items = $(data).find(".itemContainer");
if ( items.children().length == 0) {
buttonEl.hide();
}
$( '#' + newsContainer ).append( items ).isotope('appended', items);
$( '#' + newsContainer ).imagesLoaded( function() {
        $( '#' + newsContainer ).isotope('reLayout');
      });
 
cursor += itemsToFetch
});
 
});

(itemsToFetch = 5 is the number of items that show each time and it has to corespond with the k2's pagination settings.)

This works as far as showing the extra items but the new images are overlapping the existing ones. From what I understand I have to use reLayout for isotope (called layout in the new version) to load the settings for the images. I do that, but the new images are not in the correct size, and so they are not placed correctly in the grid.

Is there anyone that could complete the modification?

Last Edit: 02 Feb 2019 20:42 by crossbow.

Reply Quote

Posts:9
crossbow
Fresh Boarder
OFFLINE
Karma: 0

Re: load more posts ajax 03 Feb 2019 11:48 #11396

to anyone interesting, I've managed to fix it. I'm not sure it's 100% correct, but it works and I don't get any errors.

 
 
$ = jQuery;
var url = '?start=';
var itemsToFetch = 5;
var cursor = itemsToFetch;
 
var newsContainer = 'isotope';
var buttonEl = $('#btn-show-more');
 
buttonEl.on ('click', function(evt){
evt.preventDefault();
 
$.get( url + cursor, function( data ) {
var items = $(data).find(".itemContainer");
if ( items.children().length == 0) {
buttonEl.hide();
}
 
$( '#' + newsContainer ).imagesLoaded( function() {
    $( '#' + newsContainer ).append( items ).isotope('appended', items);
	setWidths();
	$container.isotope({
			masonry: {
				columnWidth: getUnitWidth()
			}
		});
  });
cursor += itemsToFetch
});
 
});