VISIT AND LIKE OUR PAGE ON FACEBOOK
TAKE A LOOK AT OUR TWEETS ON TWITTER
SUBSCRIBE TO THE JOOMFREAK RSS FEED
VISIT OUR CHANNEL ON YOUTUBE

Account Details

Change your name, email, password or permanently delete your account. Change settings

We offer several ways you can get support from our experts: Support ForumKnowledgebaseNewsletter

Your Forum Posts

No posts to display.

Welcome, Guest
Username Password: Remember me

load more posts ajax
(1 viewing) (1) Guest
  • Page:
  • 1

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.

  • 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
});
 
});
 
 

  • Posts:9
  • crossbow
  • Fresh Boarder
  • OFFLINE
  • Karma: 0

Re: load more posts ajax 13 Feb 2019 02:54 #11403

Thank you for your sharing!

joomfreak

  • Posts:2732
  • isupport
  • Moderator
  • OFFLINE
  • Karma: 0
  • Page:
  • 1
Time to create page: 0.87 seconds
Sunday 21 April 2019

joomfreak is not affiliated with or endorsed by the Joomla Project or Open Source Matters.
The Joomla logo is used under a limited license granted by Open Source Matters the trademark holder in the United States and other countries.