A few weeks ago a reader asked if I had an example of infinite scroll with a ColdFusion back end. I replied that I did not, and that infinite scroll was the worst thing to happen to the Internet since the rainbow horizontal rule.
I'm possibly being a bit overly dramatic, but I'm really not a fan of it. Maybe it's the OCD in me, but the fact that I can never get to the end of an infinite scroll UI just bugs the hell out of me.
That being said - I figured - why not make a quick example. It can't hurt, right?
I did some Googling on the topic. Initially the results I found were not very helpful. Many required a bit of configuration and I was really looking for something quick and simple. Finally I came across this great answer on Stack Overflow:
4 simple lines. Nice! So I took this and ran with it. I first created a fake service in a ColdFusion component that would return an infinite amount of data. Not exactly real world, but it worked. Note that I added a bit of a delay to the code so that my local testing would feel a bit more realistic.
The code here is pretty arbitrary. I return an array of structures containing a title and a body. I accept a start parameter, but I don't really even use it. Again, the entire purpose for this was to just send me a lot of data. Now let's look at the front-end code.
A bit more than 4 lines, but hopefully you will see that I've simply taken the logic from the Stack Overflow answer and wrapped it around a call to a function called loadContent. loadContent handles several things.
- First, it is intelligent enough to recognize when it is fetching data and prevent you from making multiple XHR requests at once.
- Secondly, it handles updating the DOM with a loading message so you know important crap is on the way.
- It does the XHR call and handles rendering it out. (Insert reminder about using JavaScript templates here.)
- Finally it removes the loading message.
Overall, pretty simple. You can demo this here: http://www.raymondcamden.com/demos/2013/may/21/test.html. If it seems slow, remember that I kept in that sleep() command there.
I built a second demo that makes use of my actual blog database. For the most part it is the same, but note the use of a Query and limit operations to page the data.
You can demo this version here: http://www.raymondcamden.com/demos/2013/may/21/test2.html
In my testing this downloaded pretty quick (and I'm on VPN now downloading 2 gigs of VMs). There are two things missing from this version.
One - I need to enable my front-end service to recognize when it is no longer getting rows of data from the back end. I could handle that with a flag in the result object or some other way.
Second - If I were to add links to the actual blog entries, I'd need to support some way of remembering where you were when you hit the back button.
If folks care, I'll do some updates to add that.
Archived Comments
How would you implement remembering the scroll position?
When the page loaded would you generate all the content from top down to where you left, or just load the position +/- a certain amount and implement the same sort of JavaScript to load results as you scroll back up?
That I don't have a good answer for. I mean obviously you can easily remember scroll position with sessionStorage. You could also update the URL with hashmarks (#page2). On return though - I'm not sure what is best. Just show pageN? Or get page 1- N, which may be slow.
A user would probably expect to see the page how they left it, so 1-N. But they may never scroll back up to the top again so it might be a waste of bandwidth/time.
There's also the problem of working out if they clicked back, or if they left the site, closed the browser, then came back later.
I guess this all just supports the infinite scrolling is bad argument - I do prefer paging.
You could use the same concept in a scrolling HTML5 game though.
I think if they closed the browser and came back the expectation would be that they only saw p1 (again, assuming p1 == latest news/blog entries).
Good example!
Facebook doesn't remember where your last scroll was, it will always serve you the start of the wall. I don't think I've ever seen a site with infinite scroll functionality remembering the latest scroll position.
Oops, where did that name come from in my post?
Here is a damn good article on Infinite Scroll:
http://uxdesign.smashingmag...
I think this quote sums up my issues: "reaching an end point provides a sense of control"
Very cool! 9-5 I am doing CF8, so I spun up Railo to run the code.
Ray thanks for the link to the Smashing Magazine article it discussed everything that made me hesitant about using an infinite scroll. If you deal with large amounts of data its very easy for the user to get lost etc.
On one project I just finished we developed an infinite scroller for displaying tabular data. That was some fairly ugly code as it allowed the user to sort columns as well as doing the scrolling and fetching new data. It works but really was a lot of custom code.
then I find this: http://www.datatables.net/r...
Great info Raymond. It gives me a great starting point as I start to play with data retrieval and crud operations in tables.
Thanks also to larry c. lyons above. http://www.datatables.net/ is pretty sweet!
Just wanted drop a line and say thanks for this great write up. This really help me out.
You are most welcome.
very good.
Thank = ?????
Is there a way to hide / encrypt the get function?
$.get("service.cfc?method=getData", {start:position}, function(res, code) {
so as to protect / hide the source files you are using and methods?
No. Anyone can open up dev tools and see the request. There should be no need to do this though honestly.
Thanks Ray - I used your base code above to get started. I still had to do some serious legwork - but I will most likely be adding a blog page to my site with some sample code in the future.
Always a fan of your work...
- Angel