Monthly Archives: January 2020

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.