#hashes and urls

[stoobs3k]

Hi,

I recently started to make a small project ajax driven. Most of the implementation has been done through load calls in jquery and simple html and css edits. However, I have run into an issue. When you click on a link to another page, a jquery load function is called the new content is loaded on the site. In the process the url is followed by a hash of the page just clicked on. My question is how do I make it so that when someone types in the address with a specific hash, the load function is called and the correct content appears?

Here’s the url for the project and some of the key files:

http://www.stoobs.com/testing/ajax/

http://www.stoobs.com/testing/ajax/js/ajax.js

http://www.stoobs.com/testing/ajax/css/global.css

Also, I’m sorta a newbie with jquery so if I did some stuff weird it’s just because I don’t know the proper way.

[Hugo]

Hey there,

First let me get this straight – so what you want is when I enter your webpage with the following URL: http://www.stoobs.com/testing/ajax/#blog –> it should automatically display your blog, and not the first page?

If yes, I can help you. I’ve stumbled on this one a few weeks ago. What I did (might not be the most ‘clean’ solution) is ‘reading out’ the URL, the hash to be more specific. Use the hash object for this one, it is stored in window.location.hash:

Code:

var hash = window.location.hash;
if(hash){
// Your jQuery load functions IF a hash is specified
if (hash == ‘#blog’){
$.load(blogstuff);
} elseif (hash == ‘#services’){
$.load(servicesthings);
} elseif //etcetera.
}

Hope this helps you.

-H

[James]

Don’t forget about the back button! Ajax is great for speeding up and enhancing websites but using it for main site navigation is a very big task; history management is an integral part of such a thing. You can’t just throw around some click handlers and jQuery to get it done.

Your URLs still need to be book-markable and the browser’s back button needs to be operable.

[Hugo]

"James" wrote:

Don’t forget about the back button! Ajax is great for speeding up and enhancing websites but using it for main site navigation is a very big task; history management is an integral part of such a thing. You can’t just throw around some click handlers and jQuery to get it done.

Your URLs still need to be book-markable and the browser’s back button needs to be operable.

But if one would make his navigation work using AJAX and change the URL with a specific hash every time a visitor is navigating, and make sure that someone from the ‘outside’ with a specific URL is taken to the right section, then AJAX navigation should be allright, right? (what I’m trying to say is: if you’d handle all the things above, AJAX-driven navigation should work properly, right?) This post is about only one part of proper AJAX-navigation, the URL handling or ‘history management’.
Another essential part is that one should also make this type of navigation accessible for non-javascripters. So the default website navigation should work like a common website navigation (just linking to files on the server), and after this default navigation has been loaded the visitors with javascript-enabled browsers will get an extra chunk of code to morph the navigation to an AJAX-navigation.

You should consider what pro’s AJAX-driven navigation has against it’s cons; speed versus the big task of URL handling, history management and a non-javascript backup plan.

[Author]

Posts