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>






This custom control requires jQuery.
Create a custom control and add a property named "repeatId". Add this custom control next to your repeat control and pass it the id of the repeat control.

XPages
F. Kranenburg
January 6, 2015 5:48 AM
Rating
55

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.



No comments yetLogin first to comment...