Update to infinite scrolling snippet

Ferry did write a great snippet to get infinite scrolling in views posted on openntf xsnippets but lately I found that this had stopped working on some server versions. So I did some changes to get this to work on all versions

<?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()) {
      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();
     }
   }
});]]></xp:this.value>
  </xp:scriptBlock>
</xp:view>

The changes is in the script block where I added a check if we find the span or the a tagg and if that we do a click on the first element found. This is because I didn’t get it to work using JQuerys ordinary click function.

  1. Hi, do you have an actual working XPage example with the infinite scroll to share ? I never had it working

  2. Sure, I will try to get the time to create a sample db and add to the post.

Leave a Comment


NOTE - You can use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

This site uses Akismet to reduce spam. Learn how your comment data is processed.