Skip to content Skip to tags Skip to twitter news Skip to blog roll Skip to categories Skip to archives Skip to recent posts

December 3, 2008

none

Really Simple History: Ajax history and bookmarking library

by in Javascript,jQuery,Tips,Web Development on December 3, 2008 @ 12:00 pm

For some time now I have been using Really Simple History for my applications that use a good amount of AJAX. RSH is exactly what it sounds like, it is a really simple way of adding history and bookmarking to your AJAXified apps.  To see it in action have a look at the Mason’s Graduate Requirements site where it is being used to handle bookmarking for four separate parameters.

What I want to cover in the article is what I have learned and what steps I took when coding with RSH for the Mason project and for some other on going projects.

First thing you should do is download the Really Simple History code.

Secondly, I have been using a modified version of Adam Vandenberg’s Querystring functions which has only one modification to it.

  1. if (qs == null) qs = location.search.substring(1, location.search.length);
  2. // changed to
  3. if (qs == null) qs = location.hash.replace(/^.*#/, '');

You will need to set up your script is a particular way so that the history script is created first, and then initialized, at least the way I do it, when DOM is ready.  You can get away with doing it on Window.onload but since most likely your code will be minipulating the DOM, initializing on DOM ready is probably better for you.

I set up my inital code like below:

  1. var initail = false;
  2. var qs = null;
  3.  
  4. window.dhtmlHistory.create();
  5.  
  6. $(document)
  7. .ready(function(){
  8.     dhtmlHistory.initialize();
  9.     dhtmlHistory.addListener(theListener);
  10.  
  11.     if(!initail){
  12.         theListener();
  13.     };
  14. });

Lines 1 and 2 we set up some globals we will be reusing later on and line 4 we create the history object. Lines 5 and 6 should be familiar to you, here we just check to see if the DOM is ready, if so, we run the code in the containing function. Line 8 we initialize the history script and at line 9 we set the listener to “theListener” which is a function I will point out further down the page. You will see that I also have an IF statement that is checking to see if this is the initial run. This is because the the RSH script does not run the listener script when it is initialized.

The next function is just a helper function I use all the time when dealing with the hash:

  1. hash = function(){
  2.     return location.hash.replace(/^.*#/, '');
  3. };

The last function is the “theListener” function which I referenced at line 9 of the second group of codes. This function will get called each and every time the hash changes.

  1. theListener = function(){
  2.     if(!initail) initail = true;
  3.     qs = new Querystring( hash() );
  4.  
  5.     if( typeof qs.get('cat') == 'undefined' ){
  6.         // run cat specific code
  7.     }
  8. };

Although the RSH script does pass back two params you will see that I don’t use them and the only real reason for this is that I felt it was too complicated and I never really figured out how I should use them.

At line 2 of the function we check to see if the function was already initiated. Then at line 3 we set up a new Querystring reference – should probably change the name to hashstring or something like that at some point. And from this point on, you can check your query string for what ever parameters you need to and run the appropriate codes.

back to beginning of this post back to skip to links

If you liked this article why don't you share it:

Stumble it delicious Digg it Reddit it DZone it Bump it Mixx it! Buzz up! E-mail

Comments are closed.


Learn from my mistakes, I got burnt by the flame, you don't have to.


RSS Feed Link My Hosting of Choice

70 queries. 0.286 seconds. Powered by WordPress visitor stats