Infinite Scrolling with Manual Trigger in ExpressionEngine

I needed to implement a ‘load more’ button on a listings page on a website. So instead of listing x items per page, I needed to load an extra x items on the same page each time the ‘load more’ button was clicked, similarly to how Twitter has a button at the bottom of the screen to view more tweets.

I found a couple of great tutorials by Justin Long and John Henry on how to implement infinite scrolling in ExpressionEngine which worked a treat for automatic scrolling. There were some snippets for triggering the scrolling by clicking on a link, but they would not work for me. Finally I came across a thread on GitHub which revealed that the Infinite Scroll docs are out of date and you need to use different code to get the manual trigger link working.

So, here’s how I got infinite scrolling with a manual trigger link working in EE:

1. Have a standard channel entries tag with paging in your EE template. You will need to give your next link a class/id, and also have a way of referencing a paging element wrapping this next link, the element for each item you are listing out and a wrapper container element surrounding all the items.
[html]
<!–call to infinite scroll will reference this wrapper element (.wrap-list here)–>
<div class="wrap-list">
{exp:channel:entries dynamic="no" channel="work" limit="6" disable="member_data|categories" paginate="bottom"}
<!–when absolute_count equals absolute_results we are at the end, so add end class to use in js callback to hide more link–>
<!–itemSelector option in js will reference item identifier (.list here)–>
<article class="list {if "{absolute_count}" == "{absolute_results}"} end{/if}">
<h2>{title}</h2>
<!–content etc–>
</article>
<!–this closes the items wrapper div (.wrap-list here) so that the view more link will always be below all items listed–>
{if count == total_results}</div>{/if}
{paginate}
<!–navSelector option in js will refer to this element which needs to wrap more link (.actions here)–>
<div class="actions">
{if next_page}
<!–nextSelector option in js will refer to this more link (.next here)–>
<a href="{auto_path}" class="next">View More Items</a>
{/if}
</div>
{/paginate}

{/exp:channel:entries}
[/html]

3. Include jquery, the jquery.infinitescroll.min.js and behaviors/manual-trigger.js files in your EE template.

[html]
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><p>
<script src="/assets/scripts/jquery.infinitescroll.min.js"></script>
<script src="/assets/scripts/manual-trigger.js"></script>
[/html]

4. Include the following script after the other javascript files:
[code lang=”js”]
<script type="text/javascript">
$(document).ready(function(){
//#inifinte scroll call – first part is options and second part is callback function
$(‘.wrap-list’).infinitescroll({
behavior: ‘twitter’, //#use manual trigger link, remove behaviour line to revert to automatic scroll
navSelector : ".actions", //#set to paging element wrapping next link
nextSelector : "a.next", //#set to next link selector
itemSelector : ".list", //#set to selector for an item being listed
loading: {
finishedMsg: "", //#text you want to appear when you reach the end of the list
msgText: "Loading more items…", //#text to appear while loading more items
img: ‘/assets/images/loading.gif’ //#image to display while loading
},
extractLink: true //#this line is vital for this to work in EE
},
function(newElements,data) {
//#this callback function is called after each set of items are loaded in
//#it’s used to hide the view more link when we are at the end
//#in EE template we put a class of end on the last item, so if we find that item, hide the trigger link
if($(‘.wrap-list .end’).length)
{
$(‘a.next’).remove();
}
});

});
</script>
[/code]

With the above code in place, on page load, you should see the first x items with a more link. Each click of the more link should load x more until all items are loaded at which point the more link should vanish.

I haven’t been able to get this working in Internet Explorer 8 or earlier yet. The automatic infinite scrolling works fine in IE8, but the manual trigger part does not. However, you just get standard paging behaviour i.e. clicking the more link the first time loads the standard page 2 URL etc instead of staying on the same page.