A few days ago I got some good feedback about a few issues with the site. The first issue involved pagination. If you click the Next or Previous link on the site, you will notice that the content changes, but not the entire page. This was accomplished rather easily using the <cfdiv> tag. I didn't need JavaScript at all for the links, as ColdFusion handled all the Ajax HTTP requests for me behind the scenes. Incredibly easy - and incredibly helpful as the pagination now was much quicker than forcing a complete page reload.

One problem though involved users who came back to the site after visiting a link. If they were on page 2 for example, clicked to follow a link and then hit Back in the browser, they would end up back on page 1. So how could I solve it?

I've noticed on other Ajax-based sites that hash marks (foo.com/index.cfm#Something) were used to differentiate different 'states' or 'pages' within the application. I decided to use this for the site. Whenever you click Next or Previous, I'll update a page value in the URL. I switched to the following code:

next = function(u) {
document.location.href = '###np#';
ColdFusion.navigate(u,'content');
document.body.scrollTop=0;
}

The #np# portion represents the next page. This involves some ColdFusion code I'm not pasting in, but basically, if we are on page 3, then np will equal 4. The ColdFusion.navigate function is a JavaScript function automatically included on pages using ColdFusion's Ajax features. As you can guess, it sends a particular content block (like a DIV) to a new URL. My next link passes in the next URL via the u arguments. So all in all, I first change the location of the browser to the next page, from #3 for example to #4, and I then push the DIV with the content to the new URL. (I'll explain the last line later.) The previous link code works pretty much the same.

Ok - so far so good. I noticed I could follow a link and hit back and if I had #N in the browser, it returns. The next issues was getting the server side code to actually recognize the #N. This turned out to be a bit more difficult then I imagined. I had assumed that everything about a URL would end up as a CGI variable. It seems the anchor values are not. I guess that makes sense in a way since an anchor link (ie, linking to another anchor in a page) doesn't create a new server request, but, I had assumed that if the anchor was there in the initial URL, it would be there in the CGI scope. No such luck.

I began to reconfigure index.cfm. This is the core file of the site. The first thing I did was add code to run a JavaScript function on page load.

<cfset ajaxOnLoad("loadContent")>

This is a convenience function for ColdFusion applications that use Ajax. I then created the following JavaSciprt:

function loadContent() {
var baseurl = 'content.cfm?';
if(document.location.hash != '') baseurl+= 'page='+document.location.hash.substr(1,document.location.hash.length);
ColdFusion.navigate(baseurl,'content');
}

This code looks for #N in the URL. If it exists, it passes it as a normal query string variable to my content div. Hopefully this makes sense!

The last tip I was given involved scrolling. I include Previous and Next links both on top and at the bottom of my main content div. If a user was at the bottom of the page and hit the Next link, they would stick at the bottom when the content loaded the new page. Sticking in the document.body.scrollTop=0; corrected that issue.

So any comments on what I did? While it worked, I wonder if there is a better solution. How many other Ajax developers are now feeling comfortable enough to worry about issues like this?