Using the scrollTop as dynamic data fetch trigger
Lately I’ve been working on a project for a major services company. The main object was to take a rather old site (about 10 years) written with classic ASP, sql2000 and modernize so it can be sold again. Prior to this project I had little to none VBS experience and classic ASP was one of the things that I knew existed but… well.. Never had a chance or need to touch. As you might expect from this kind of project, I had no documentation and the code was so terrible I had to dive right in and swim in the sewage from day one.
Inspired by previous projects and common modern practice, one of the major changes I made to the site’s architecture was the insertion of dynamic loading of data. I had few places where about 1000 records were loaded from the db, parsed into table rows and loaded into the page. Say we got 1000 data entries needed to be displayed to the user, but the user can only see 20 at the time. The question is obvious – why load the data if the user can’t see it all? Although still pretty small, a web response holding 1000 entries will be majorly larger than one holding only 20. Although net resources are cheaper these days, keeping your requests and responses as neat as possible is still a good practice in building robust web applications.
So, how do you get all of the entries on the page and keep a relatively simple and convenient user experience?
The popular option is paging, MS uses it all around in its controls. It is plain and simple, the user quickly holds control of using this method and everybody is happy.
But, What if you want to get a little creative, little less MS geek who suffers nightmares of datagrids and repeaters?
What if your users already use an interface they like and it will be just wrong rocking their world by changing it?
My users use a screen that shows person records, names and some extra data which their scroll through. Up until lately (before I saved the day :)), loading that screen would take about 20 seconds:
1. Fetch about 1000 db records
2. For each row in the recordset, generate a TR
This created a massive page which in most cases the user didn’t even get the chance to see because of timeouts.
Considering the situation in which I wanted as fewer changes to the UI as possible, I decided to stick with the scrolling technique but in the same time, load only the needed information, as the user requests it.
The user can only see 20 records? Load only 20!
“But, hi! I want more”, the user desperately looked at me through tear stained eyes… “Just ask!”, I cheerfully responded :)
How do I know when the user is asking for more? When the scroll hits bottom.
makes sense.
How do you tell when the scroll hits bottom?
-
$("#personTblDiv").scroll(function() {
-
var wrapperHeight = $(this)[0].clientHeight;
-
var contentHeight = $("#personTbl")[0].clientHeight;
-
var scrollTop = $(this)[0].scrollTop;
-
if (scrollTop == (contentHeight – wrapperHeight)) {
-
//do stuff
-
}
Consider a layout consisting of a div holding scrollable content, say a long table. When the scrollTop property of the scrollable content equals to the difference between the height of the scrollable content and the height of the container, you know the scroll has hit bottom. If the scrollable content holds person records for example (as in our case) this will be the time to load some extra records into the table, using ajax.
**************************************************************************************
Pretty awesome, isn’t it? :)
No comments
