Simple custom control to add inifinite scrolling to repeat or views


<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xe="http://www.ibm.com/xsp/coreex">

	<!-- make sure 'add rows' component is hidden -->
	<style>
		.infiniteScroll{display:none;}
	</style>
	
	<!-- add a class for the 'add rows component'  -->
	<xe:pagerAddRows id="pagerAddRows1"
		for="#{javascript:compositeData.repeatId}"
		styleClass="infiniteScroll">
	</xe:pagerAddRows>

	
	<!-- small script to check if we need to auto-click the 'add rows' button -->
	<xp:scriptBlock id="scriptBlock1">
		<xp:this.value><![CDATA[$(window).scroll(function(){
    if($(window).scrollTop() == $(document).height() - $(window).height()) {
       $(".infiniteScroll ul li a").click();
    }
});]]></xp:this.value>
	</xp:scriptBlock>
</xp:view>
All code submitted to OpenNTF XSnippets, whether submitted as a "Snippet" or in the body of a Comment, is provided under the Apache License Version 2.0. See Terms of Use for full details.
3 comment(s)Login first to comment...
Thomas Adrian (at 08:33 on 04.02.2024)
tips: do not set disableOutputTag to true , then it will not work
Fredrik Norling (at 07:03 on 28.01.2020)
Another update on this snippet, if
if($(".infiniteScroll ul li span").length!=0){
$(".infiniteScroll ul li span")[0].click();
}
if($(".infiniteScroll ul li a").length!=0){
$(".infiniteScroll ul li a")[0].click();
}
Fredrik Norling (at 07:08 on 28.11.2019)
On newer servers you need to change line 20 to

$(".infiniteScroll ul li span").click();

Due to dom changes in the rendered code