Been on Facebook, Twitter or any number of sites that loads data as you scroll? I would bet that most of you have. lets show you how to set up your site to load data inline while the user scrolls down the page.

The first steps is to get the initial set of data and a record count for the entire dataset that is going to be loaded up. This is pretty much standard Coldfusion nothing fancy.

view plain print about
1<cfset numRecords = ormExecuteQuery("select count(*) as total from entries")>
2 <invalidTag>
3    //Will discuss the script section below.
4 </script>
5 <cfoutput>
6    <cfset entries = entityload("entries",{},{maxResults=10,offset=0})>
7        <div id="entries">
8            <cfloop array="#entries#" index="e">
9            <div class="entry">
10                <h3 class="title"><a href="#e.getUrl()#">#e.getTitle()#</a></h3>
11                <div class="content">#e.getContent()#</div>
12            </div>
13            </cfloop>
14        </div>
15 </cfoutput>

What Is going on here is first getting the total records in the table so you do not try and load more records then you have in the table. Then loading our initial dataset using the maxResults and offset to load only the first 10 rows from the database. You loop over the results and output them on the page as normal.

Next the JavaScript portion that will be triggered when you hit the bottom of the window, as well as the defaults you set to handle getting records you haven't loaded.

view plain print about
1var offset = 0;
2    var sObj = {};
3    var totalEntries = <cfoutput>#numRecords[1]#</cfoutput>;
4    $(document).ready(function () {
5        $(window).scroll(function(){
6            if (($(document).height() - $(window).height()) - $(window).scrollTop() < 5){
7                getEntries();
8            }
9        });
10    });

Setting the initial offset to keep track of what record you need to start with. Next you create an empty object to hold our offset variable to be transferred through to the page that will be fetching our next set of records. The last of our defined variables is the variable that holds the total number of records that you will be loading (you fetched that in the code section above) through ajax.

The next section you do not want to be called until the page is loaded so it is placed inside jQuery's $(document).ready() function. Once you have our page loaded everything is all set and every time the user scrolls the page it calls the jQuery function $(window).scroll(). Then you check to see if the scrollTop value minus the document height minus the window height is < 5. The reason you check if its less then 5 pixels and not zero its that not all browsers would drop to zero and were usually between 0-5 pixels. Once that happens you are on the bottom of the page. If the statement is true you call our get entries function to fetch more records you will go over below.

view plain print about
1function getEntries(){
2        offset = offset + 10;
3        sObj.offset = offset;
4        if(totalEntries >= offset) {
5            $.get("getEntries.cfm", sObj, function(data){
6                $('#entries').append(data);
7            }, "html");
8        }
9    }

Here you are adjusting the offset to be set to the new value of the records you aim to retrieve using our variable you set up at the top of the page. This way it will be available every time you need to adjust the number. Next you set up the object that you will be using to pass through our ajax request to the resulting page. Checking to see if you still have more records left then the total you are going to fetch. If you do we fire our ajax request though jQuery $.get() to call our ColdFusion page that will fetch our next set of records and append it to the entries div that you created when creating the page.

view plain print about
1<cfif IsDefined('url.offset')>
2    <cfset entries = entityload("entries",{},{maxResults=10,offset=url.offset})>
3    <cfoutput>
4        <cfloop array="#entries#" index="e">
5        <div class="entry">
6            <h3 class="title"><a href="#e.getUrl()#">#e.getTitle()#</a></h3>
7            <div class="content">#e.getContent()#</div>
8        </div>
9        </cfloop>
10 </cfoutput>
11    </cfif>
12</cfif>

Above is the content of the getEntries.cfm file that is called from the ajax request. Your'e checking first if the offset was passed in via the URL. If it wasn't you do not want to do anything, but if you do have our offset number you proceed. The rest is identical to our initial section when the page first loads.

Now as you scroll down your page and hit the bottom 10 more records will load and you will notice the scroll bar is no longer on the bottom of your page. You endless scroll is all set up and working. Check out this demo using various RSS entries from around the web.

Tested in FF 4.0, Chrome and Internet Explorer 9, though it should work in almost any browser if it doesn't any issues will revolve around checking whether your at the bottom of the page and should not take much adjustment to get it working in your target browsers.

This entry was posted on April 17, 2011 at 1:26 AM and has received 1401 views. There are currently 2 comments. Print this entry.