IMPORTANT MESSAGE REGARDING THE FORUM

As you may already know, the JoomlaWorks Forum is powered by Kunena (the only decent forum component for Joomla).

Unfortunately, the latest update for Kunena has seemingly broken all code snippets (old and new) in the forum.

Until this message is removed, please paste any code as regular text - in other words, don't use the [code]...[/code] tags in Kunena's post editor.

Keyword

K2 - AJAX Pagination - load more items

More
3 years 8 months ago #167045 by Zed
Hi!
does anyone wonder how can i achieve this, loading more items in AJAX, like start with 4, then 8, 12, 16, etc....(loading 4 items each time)
some plugins do that, but are very limited, and not really suitable for custom k2 templates....
any sugestions?
thks!
zed

Please Log in or Create an account to join the conversation.

  • Krikor Boghossian
  • Krikor Boghossian's Avatar
  • Offline
  • Platinum Member
More
3 years 8 months ago #167052 by Krikor Boghossian
Replied by Krikor Boghossian on topic K2 - AJAX Pagination - load more items
Hello,

Unfortunately you will have to use a custom JS Script.
A nice infinite scrolling plugin is imakewebthings.com/waypoints/shortcuts/infinite-scroll/

Please Log in or Create an account to join the conversation.

More
3 years 8 months ago #167077 by willburn
Replied by willburn on topic K2 - AJAX Pagination - load more items
I am also interrested in this. I did have a look at the link you provided, exactly what i was looking for. Anyone have a short guide how to make this happen in joomla with k2?

Please Log in or Create an account to join the conversation.

More
3 years 8 months ago - 3 years 8 months ago #167079 by Zed
Replied by Zed on topic K2 - AJAX Pagination - load more items
Hi Krikor tks for the reply.
well, that was exactly what i thought (developing a custom JS) since the existing plugins give more problems than solutions.

so here it goes: (credits to my good old friend Nuno Costa (codehaha.com).

1. In you category definitions, define the amount of items to show in the beginning;
2. hide the default pagination;
3. In your custom (or default) category.php at the bottom of the page (outside the main k2 container div) add this code:
(attention to the vars, that define the number of items to fetch, as well as the button that makes the call)

<script>
$ = jQuery;
var url = '?start=';
var itemsToFetch = 4;
var cursor = itemsToFetch;

var newsContainer = 'itemListPrimary';
var buttonEl = $('#btn-show-more');

buttonEl.on ('click', function(evt){
evt.preventDefault();

$.get( url + cursor, function( data ) {
var items = $(data).find('#' + newsContainer);
if ( items.children().length == 0) {
buttonEl.hide();
}
$( '#' + newsContainer ).append( items );
cursor += itemsToFetch
});

});
</script>


3. Below the pagination block put your button:

<!-- 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>


and that's it :)

works fine and clean, and you can put this in every k2 category.php template , it will render exactly the same as you define you category_item.php

enjoy!
Last edit: 3 years 8 months ago by Zed. Reason: errors

Please Log in or Create an account to join the conversation.

More
3 years 8 months ago - 3 years 8 months ago #167082 by willburn
Replied by willburn on topic K2 - AJAX Pagination - load more items
Wow, great!

I tried this, added exactly as described above, work perfectly.

Thanks for sharing!
Last edit: 3 years 8 months ago by willburn.

Please Log in or Create an account to join the conversation.

  • Krikor Boghossian
  • Krikor Boghossian's Avatar
  • Offline
  • Platinum Member
More
3 years 8 months ago #167088 by Krikor Boghossian
Replied by Krikor Boghossian on topic K2 - AJAX Pagination - load more items
Nice one Willburn!
Kudos.

Please Log in or Create an account to join the conversation.

More
3 years 1 month ago #169743 by Alajos Szilagyi
Replied by Alajos Szilagyi on topic K2 - AJAX Pagination - load more items
Thank you for this code... you helped me out a lot!!!

Please Log in or Create an account to join the conversation.

More
2 years 10 months ago - 2 years 10 months ago #170932 by Dimitris
Replied by Dimitris on topic K2 - AJAX Pagination - load more items
Hi,

var newsContainer = 'itemListPrimary';
should be the id of the containing div right?

I'm using a template with a slightly modified category layout and the code just loads "new" items. It doesn't append them to the existing ones. It just refreshes the pages and loads the new ones. Any ideas why?

I've tested it with the default templates as well, and the same thing happens
Last edit: 2 years 10 months ago by Dimitris.

Please Log in or Create an account to join the conversation.

More
2 years 10 months ago - 2 years 10 months ago #170974 by Fotis
Replied by Fotis on topic K2 - AJAX Pagination - load more items
It should be the container that wraps the items in.

If you provide your current category.php code, it'll be easier for me to pinpoint the changes.
Last edit: 2 years 10 months ago by Fotis.

Please Log in or Create an account to join the conversation.

More
2 years 10 months ago #171011 by Dimitris
Replied by Dimitris on topic K2 - AJAX Pagination - load more items
(code follows)
As far as I can understand, I'm replacing var newsContainer = 'itemListPrimary'; with var newsContainer = 'isotope';
isotope is replacing is the default leading k2 articles.

The issue is that tried the default code, with the default k2 template (not html override) in protostar or beez and still it didn't work!

Log in  or Create an account to join the conversation.