Thursday, November 9th, 2006p>Pete Forde has taken the Pageless implementation seen in the Humanized Reader, implement it with Prototype, and write this piece on it.
They implemented the feature on their Live Filter demo, so now as you scroll down you see more results coming back at you automatically. No next, previous, or Gooooooooooooooooooogle (for SEO you will want a solution so the crawlers can find the content via deep linking).
As we move down the screen we save our current location to a temporary cookie, which allows us to resume our place on the page if we return to the results using the browser’s Back button. The trick is to define an empty, invisible DIV element which is programatically moved down the page to your previous location at page load. It acts like a magical cursor, triggering all necessary content loading as it scrolls down the page. After a brief delay, the page state has been restored without breaking the Back button.
On the server we set up a function to respond to the Ajax calls for more pages of content. It will need to accept the required page as a parameter, and it should pass the corresponding rendered HTML snippet back to the client, at which point you will append it to the bottom of the content already rendered. Thankfully, implementation of the innerHTML attribute is consistent across all major browsers.
On the results page you must render values into several hidden INPUT elements: history_index, total_pages, and page_id. history_index will start off empty, and get modified by the client script. total_pages needs to be the total number of pages that the user’s query could theoretically return at n records per page. Rails gives us this number automatically when we perform a paginated find call. Finally, history_index is just a unique number; we fill it with the number of milliseconds since 1970. There are also several DIVs, initially hidden, which you will modify to suit your application.
One caveat is that you need to make sure your server side function returns a signal to the client if no records are found. The way that the Ajax class in prototype works, you will need to receive at least one character for it to be properly handled.
We are seeing this pattern more and more, such as on the mobile with the latest Gmail Mobile application that was just released.