Implementing Browser History Management to the Application

Posted At : January 12, 2009 11:42 AM | Posted By : Kumar
Related Categories: ColdFusion 8, Web Development, Yahoo User Interface (YUI), RIA, Ajax

I previously blogged on the YUI History Manager (read it up if you haven't). I just got around to implementing it to an Application

Now, I like to include my javascript at the top of the page (and I think most people do). This meant I had to switch some things around.

The way the application is structured in HTML/CSS, the left navigation menu loads first, then the content cfdiv is loaded.

view plain print about

<div class="yui-b">
            Navigation goes here
</div>
        
<div id="yui-main">
     <div class="yui-b">
          <div class="yui-g">
              	<cfdiv id="content" />
          </div>
     </div>
</div>

1  <div class="yui-b">
2   Navigation goes here
3  </div>
4
5  <div id="yui-main">
6   <div class="yui-b">
7   <div class="yui-g">
8       <cfdiv id="content" />
9   </div>
10   </div>
11  </div>

This meant I have to delay the initialization and loading of the initial section part of my Browser History Manager until the content cfdiv is loaded. Once again here, the YUI library proves powerful. They make available to use two methods through the YUI Event Utility. These two methods are: onAvailable and onContentReady. Let me just copy YUI's description on what they do,

onAvailable lets you define a function that will execute as soon as an element is detected in the DOM. The intent is to reduce the occurrence of timing issues when rendering script and html inline. It is not meant to be used to define handlers for elements that may eventually be in the document; it is meant to be used to detect elements you are in the process of loading.

The onContentReady method shares an identical syntax with onAvailable. The material difference between the two methods is that onContentReady waits until both the target element and its nextSibling in the DOM respond to getElementById. This guarantees that the target element's contents will have loaded fully (excepting any dynamic content you might add later via script). If onContentReady never detects a nextSibling, it fires with the window.load event.

Pretty powerful stuff. So, I made a simple change to my navigation, to check for loading of the content cfdiv.

view plain print about

YAHOO.util.Event.onContentReady("content",function () {
	//Register the navigation module
	YAHOO.util.History.register("section", initSection, loadSection);    	
        //We load the default state into the cfdiv
        loadSection(initSection);
	        //Initialize the Browser History Manager
		try {
			YAHOO.util.History.initialize("yui-history-field", "yui-history-iframe");
		} catch(e)
		{
			loadSection(initSection);
		}      
    })

1  YAHOO.util.Event.onContentReady("content",function () {
2      //Register the navigation module
3      YAHOO.util.History.register("section", initSection, loadSection);
4   //We load the default state into the cfdiv
5   loadSection(initSection);
6       //Initialize the Browser History Manager
7          try {
8              YAHOO.util.History.initialize("yui-history-field", "yui-history-iframe");
9          } catch(e)
10          {
11              loadSection(initSection);
12          }
13   })

The YUI Event Utility also provides other useful event listeners and functions, so check it out. It can prove useful some day. Now I have all my links loading in Ajax into the cfdiv with browser history management support. It also meant writing a lot of ColdFusion.navigate statements. The next goal is to work on the User Administration piece, which will mean working with cfgrid and implementing a CRUD (Create,Read,Upate,Delete) functionality. Should be a lot of fun. And Adobe, give us in built Browser History Management with ColdFusion 9.