Twitter: raymondcamden


Address: Lafayette, LA, USA

ColdFusion 8 Ajax and History Management

01-08-2009 4,478 views ColdFusion 2 Comments

Earlier this week a reader, Kumar, wrote me with the following question:

Is there a way using CF8 Ajax to automate Browser History Management?

Using both ColdFusion.navigate or AjaxLink for navigation doesn't register browser history events, so the back and forward buttons stop working.

Unfortunately I didn't really have much of an answer. I have not played with any of the libraries out there that help with that, but I knew some existed and simply suggested he give them a try. He did, and was actually able to create a little demo. Not having a blog of his own, he was ok with me sharing his code.

Kumar made use of the YUI Browser History Manager. This library makes it easier to work with a browser's back/forward buttons when using AJAX based applications. First, take a look at this demo: Demo

As you click on home/away, note the URL changes, and that back and forth should work. (Although both Kumar and Yahoo mention the library has issues with Opera.) The code behind this is as follows (I'm just showing the main template as both the home and away pages are simple one line pages):

view plain print about
1<html>
2<head>
3    <!--- The YUI libraries needed to execute the History Management --->
4    <script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
5    <script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/connection/connection-min.js"></script>
6    <script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/history/history-min.js"></script>
7    <!--- Hide the iframe --->
8    <style>
9        #yui-history-iframe {
10             position:absolute;
11             top:0; left:0;
12             width:1px; height:1px;
13             visibility:hidden;
14            }
15    </style>
16</head>
17
18<body>
19    <!--- Needed for IE --->
20    <iframe id="yui-history-iframe" src="blank.html"></iframe>
21 <input id="yui-history-field" type="hidden">
22
23<div id="nav">
24    <ul>
25        <li><a href="javascript:doNav('home');">Home</a></li>
26        <li><a href="javascript:doNav('away');">Away</a></li>
27    </ul>
28</div>
29
30
31<!--- This is where all the content will be loaded --->
32<cfdiv id="content" />
33
34
35<script>
36    function doNav(url) {
37        //We only register the brower history entry. Storing this automatically calls the loadSection function defined below.
38        YAHOO.util.History.navigate("section", url);
39            
40    }
41    
42 //This function takes in the section variable and redirects the content cfdiv to the proper place.
43 //You could shorten and combine the doNav and loadSection functions if needed.
44 //We call this function through the
45 function loadSection(section) {
46
47        switch(section) {
48            case 'home':
49            ColdFusion.navigate('test.cfm','content');
50            break;
51            case 'away':
52            ColdFusion.navigate('test1.cfm','content');
53            break;
54        }
55
56
57 };
58
59    initSection = '';
60    if(document.location.hash != '') {
61        if(document.location.hash.indexOf('#section=') == 0) {
62            initSection = document.location.hash.substr(9, document.location.hash.length);
63        }
64    }
65
66 //This is the default section that needs to be loaded, in other words your home page.
67 if(initSection == '') initSection = "home";
68
69 //We must register our navigation module, which I have called section with Yahoo's history manager
70 // This has to be done before initializing the history manager
71 YAHOO.util.History.register("section", initSection, loadSection);
72 //loadSection function is called after calling YAHOO.util.History.navigate,
73 // or after the user has trigerred the back/forward button.
74 // We cannot distinguish between these two situations.
75
76 // Use the Browser History Manager onReady method to initialize the application.
77 YAHOO.util.History.onReady(function () {     
78 //We load the default state into the cfdiv
79 loadSection(initSection);
80 });
81
82 // Initialize the browser history management library.
83 try {
84 YAHOO.util.History.initialize("yui-history-field", "yui-history-iframe");
85 } catch (e) {
86 // The only exception that gets thrown here is when the browser is
87 // not supported (Opera, or not A-grade) Degrade gracefully.
88 // This is used for normal navigation in case our history manager initialization failed
89 loadSection(initSection);
90 }
91
92 </script>
93
94 </body>
95</html>

I'm pretty new to the code myself, but I'll try my best to explain it. Obviously we need to import the YUI libraries and that is done on top. Some CSS/iframe HTML is used for IE. Each navigation link runs a function called doNav. This runs the History.navigate function. If you skip down to the register function, you can see where we set the library up with a default string to use in the URL as well as a function to run after the library is used to change urls. Going back to doNav, when we say load 'away', it's going to to ask the Yahoo library to do it's history "magic" in the URL and then run loadSection with the value 'away'. The loadSection function just runs the normal ColdFusion.navigate.

I modified his code a bit. Specifically I added this portion to let bookmarking work:

view plain print about
1initSection = '';
2if(document.location.hash != '') {
3    if(document.location.hash.indexOf('#section=') == 0) {
4        initSection = document.location.hash.substr(9, document.location.hash.length);
5    }
6}

This is similar to the code used over at ColdFusionBloggers. Pretty slick code.

Update: I was wrong - at the time I exchanged emails with Kumar, he did not have a blog. Now he does: http://www.coldfusion-ria.com/Blog/

2 Comments

  • Commented on 01-08-2009 at 1:01 PM
    Awesome summary Ray.

    For the admin area of a fairly large enterprise system, we chose swfaddress (http://www.asual.com/swfaddress/samples/ajax) to handle our navigation and history. It worked really well the way that we have everything set up.

    We had chosen to use the Prototype/Scriptaculous library shortly before CF8 came out and the YUI solution didn't appeal to us at the time. However, I'm more and more impressed with the quality of YUI. Once again, great info.

    Tony
  • Commented on 01-08-2009 at 4:38 PM
    Thanks Ray.

    Crossposted over at my new blog too,
    http://www.coldfusion-ria.com/Blog/index.cfm/2009/...

    @Tony Brandner, yea I found that the YUI library was well documented. As such there are various libraries available to implement this, including one with jQuery. I would love to see a jQuery example with CF.navigate if someone has one.

Post Reply

Please refrain from posting large blocks of code as a comment. Use Pastebin or Gists instead. Text wrapped in asterisks (*) will be bold and text wrapped in underscores (_) will be italicized.

Leave this field empty