What is best way to implement ajax infinite scroll to a custom component list view?

by user2097091   Last Updated March 14, 2019 04:10 AM

What is the recommended way of overriding standard jPagination class to achieve ajax infinite scroll on a joomla! 3 custom component list view?

Ideally I would like to push the browser state and history after after each pagination/load of more items in the list.

I found this jQuery plugin, which claims to be simple to implement in joomla and works by overriding the pagination links - not working yet. Will post some code when I get somewhere.

Has anyone successfully achieved this?

Thanks



Answers 2


Unfortunately, there is no feature like this in the core. But you can achieve it with template overrides till web services and pagination layout are implemented.

There is no out-of-the-box solution, but in principle you just need to alter the category view(-layout) to provide an optional "items-only"-markup. If you are not familiar with php and js you might need professional help.

Nils Rückmann
Nils Rückmann
March 07, 2015 02:16 AM

This handy little piece of code will help with your custom component development. I am using it for infinite scrolling of items in my custom component and it works beautifully. You ca combine it with simpleScoll.js to hide the scrollbars.

In essense you loop through your items inside the scrolling div. The listened then checks the height if your container and does some math to determine when to pull another set of data from your pagination and append it to the #listings div.

<style type="text/css">#infiniteScroll{overflow:auto; height:300px; width:100%}</style>

<div id="infiniteScroll">
    <div id="items">
        <?php foreach($this->items as $item){?>
            <div class="item">
                SOME INFO THAT IS BEING DISPLAYED
            </div>
        <?php }?>
    </div>
</div>    
<div id="allShown" class="hidden">All Items have been displayed.</div>

<script type="text/javascript">
var itemsToFetch = 10;
var offset = itemsToFetch;
$('#infiniteScroll').bind('scroll', function(){
    var urlVar = '?start=';
    if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight){
        $.get(urlVar + offset, function(data){

            var items = $(data).find('#listings .listing');
            $('#listings').append(items);
            if((offset + itemsToFetch) > <?php echo $this->pagination->total;?>){
                offset += (<?php echo $this->pagination->total;?> - offset);
                $("#allShown").removeClass("hidden");
            }else{
                offset += itemsToFetch
            }
        });
    }
});
</script>
Terry Carter
Terry Carter
March 14, 2019 03:36 AM

Related Questions



Changing look of pagination

Updated March 13, 2016 08:04 AM