24th May 2008

Using JavaScript Regular Expressions for Ajax Navigation

When I originally designed my site, I decided that I would make the navigation systems Ajax (partially because I wanted to expand my skills, partially to decrease load times, and partially because I thought I was being clever). So I got the basic nav systems working and I was all happy with myself right up until the first time I tried to provide direct link to one of my samples. As usual, I am not as clever as I first thought.

A direct link to the samples (or any other page for that matter) would load the page outside of the context of the nav system and site layout, which defeated the point of the nav systems and looked like crap (not that it is visually stunning within context, but even more so than normal).

I decided this was no good and started formulating ideas of how I could make particular locations within my site directly accessible without having to scrap my existing navigation system.

Upon reflection realized that one of the things jQuery makes pretty easy is triggering events on objects, such as clicks. So if I could identify the main and sub section I want to go to, I could trigger the click events for the appropriate links and end up where I wanted to be.

Now I just need to figure out how to pass that information. Fortunately, the other day there was a discussion on Flashkit about a URL system called SWFAddress. Basically, this system uses the named anchor system with the # sign so that you can change the last part of the URl string with out the browser actually taking you to another location. This leaves you with a parseable URL.

So now I had a way to get to my desired location (trigger click event), and a method of passing the data (the # url trick) I needed to be able to distinguish which path of the url referred to the main section and which referred to the sub. I decided to go with the following syntax:

http://www.visualflowdesigns.com/#main:main_page.html#sub:sub_page.html

All that was left is to parse the URL and trigger the click events for the links:

Main Section:

var mainSection = window.location.href.match(/#main:\w+\.html?/)
if(mainSection){
//perform string replacements to convert the id to jQuery syntax and to escape special jQuery caharcters
var goto = mainSection.toString().replace(/main:/,'').replace(/\./,'\\.');
$(goto).click()
}

Sub Section:

var sample = window.location.href.match(/#sub:\w+\.html?/)
if(sample){
//perform string replacements to convert the id to jQuery syntax and to escape special jQuery characters
var goto = sample.toString().replace(/sub:/,'').replace(/\./,'\\.');
$(goto).click()
}

The nice part about this is that since I am triggering the click events, my menus update themselves just as if the user had clicked on them.

The current system solves my immediate problem of not being able to provide direct links to my samples, but even as I wrote this I noticed that I am locking myself into HTML pages with my regular expression. However, now that I have the basic system working, I can play with and tweak it as needed.

As always Ideas and comments welcome.

Comments are closed.