Building a page with infinite scroll in PrimeFaces using Waypoints jQuery plugin

Infinite scroll is a page feature where in data is automatically loaded as you scroll down to the bottom of a page. Facebook uses this feature in their "news feeds".

This demonstration uses PrimeFaces with a jQuery plugin called WayPoints.  Plugin download and documentation can be found here http://imakewebthings.com/jquery- waypoints/.  We employed PrimeFaces' <p:remoteCommand /> and <p:outputPanel /> along with Waypoints, the main component of the process.   It is Waypoints that initiates the update process that call <p:remoteCommand />, and in turn into the backing code, as soon as a Waypoint element appears at the bottom of the page/viewport.

( Live demo of this blog is here http://kahimyang.info/kauswagan/howto_blogs/java, just scroll to the bottom of page.)

Normally, in a plain HTML page, you would include Waypoints either at the bottom of the page body before the closing </body> tag or in the head section of the page like below.

<script type="text/javascript" 
    src="/kauswagan/waypoints/waypoints.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('.loadmore').waypoint(function(event, direction) {
            if (direction == 'down') {
                $('.loadmore').waypoint('remove');
                more_records();
                $('.loadmore').waypoint({offset: '100%'});
            }
        },{offset: '100%'});                   
    });
</script>        

Notice that offset is measured from the top of the page, 100% being the bottom of the page, which means that a trigger would occur if the Waypoint element, with a class loadmore in our example, appears at the bottom.  Once Waypoint is trigged, you have to call Waypoint again to enable the next trigger, the next time the Waypoint element reappears.

more_records() is the JavaScript code that fetches more data (line 8).

In PrimeFaces version 3.4.1 however, the above construct would continuously and successively call our <p:remoteCommand /> at the first occurrence of the trigger.   To overcome this, we implemented Waypoints in our page like the following.

In the head section (or in the bottom of the body).

<script type="text/javascript" 
    src="/kauswagan/waypoints/waypoints.min.js"></script>

In the body.

<p:outputPanel autoUpdate="true">
    <h:dataTable  id="philblog" rowClasses="row_1a,row_1b" 
                  var="newsObject"
                  value="#{evNewsBlogsBean.philBlogs}"  >

        <h:column>
            <!-- contents remove for clarity -->
            <h:panelGrid columns="2">

            </h:panelGrid>
        </h:column>
    </h:dataTable>

    <h:panelGroup rendered="#{evNewsBlogsBean.moreData}">

        <script type="text/javascript">
            $(document).ready(function() {
                $('.loadmore').waypoint(function(event, direction) {
                    if (direction == 'down') {
                        more_records(); 
                    }
                },{offset: '100%'}); 
            });
        </script>        

        <div class="loadmore" />

        <p:remoteCommand name="more_records"
                         update="philblog"
                         actionListener="#{evNewsBlogsBean.loadMore}" />
    </h:panelGroup>

</p:outputPanel>

Note: (4/9/2013) As of version 2 of the Waypoints plugin, the callback function parameter to waypoint in line 18, requires only one parameter, the direction.

<p:outputPanel /> is a container component that updates/loads that page section bounded by it.  All components inside it are loaded each time it is updated, each time <h:dataTable /> is updated, in our case.  This refreshes and reloads our Waypoints with fresh new page offsets.

In line 26, we have our Waypoint element which a <div /> with class "loadmore".  You can also use the ID of an element instead. Our remoteCommand in line 28 calls the backing bean and updates the <dataTable />.

more_records() is a bodyless JavaScript code in line 20, which is also the name of our <p:remoteCommand />.

The backing bean of the page should look like below although most of the data were removed for clarity.   If using MySQL to fetch data, just control the number of rows queried through the limit clause.

@ManagedBean
@ViewScoped
public class EvNewsBlogsBean implements java.io.Serializable {

    List<MyData> list;
    
    public List<MyData> getPhilBlogs () {
        if (list==null) {
            list = getList ();
        }        
        return list; 
        
    }

    public void setPhilBlogs (List<MyData> s) {        
    }
    
    List<MyData> getList () {
        return getFirstData ();
    }
    
    public void loadMore() {
        list = getNextData ();        
    }

    public class MyData {
        private String member1;
        private String more;
        /*
           public getters/setters
        */
    }
    
}

In the page snippet above in line 14, we stop to render the entire Waypoints block on certain condition which is handled by #{evNewsBlogsBean.moreData}.  This is either we reached the end of data or a number of rows limit has been reached.

That's it Good Luck.

If you like the article, please share.
(Site URL pattern has changed as a result social actions counter was reset.)



Comment icon Comments (Newest first)