I would like to do the same. I have been trying to find out how to do this for ages and cannot find anything to help me. I have just started using ajax.
Can anyone just give the names of what i need to look at to find out?
or can you give me a bit of example code?
05-15-2011, 08:39 AM
The theory behind it is very simple. There's only two "parts" that you need to understand:
1. When a page loads, use document.location.hash to get the value after the #. Use an AJAX request to get the content based on the value of document.location.hash. This allows users to bookmark pages and send links to your pages through e-mail.
2. When you click on a link on the page, set document.location.hash to the value of where the link points, and then use AJAX to grab that content and update the current page. Very important to make these links degradeable so that if the visitors doesn't have JS enabled, or is a search engine bot, it will still be able to index the content.
An easy way to do this is to have a site with the structure:
When the user clicks on a link that points to mysite.com/blog - update the hash tag so the url looks like mysite.com/#/blog and then grab the content from mysite.com/blog and update the current page with it. Keeps everything easy to understand this way.
I've implemented something quite close to this in the past, and this is exactly how I've done it. sammy.js provides a framework for this type of thing, although I've never played around with it myself.
05-15-2011, 09:24 AM
Thanks! but im still a little confused.
On the first page, mysite.com, i have links to the sammy.js and jquery, and a normal link,<a href="blog/article.html">Artical</a>. But how am i meant to get the value of the #?
Is this right?
Also how can i make it so ajax loads the part after the #/ ?
I understand the concept of which you explained, but don't know how to write it as code
05-15-2011, 11:51 AM
Leave the link as blog/article.html...that's fine.
However, apply a global event listener to all internal links on your site. The following is an EXAMPLE only:
e.preventDefault(); //stop the clicking of the link from processing
var page = this.href;
document.location.hash = '/'+page; //example.com/#/blog/article.html
page + '#content',
//replace your content with the value of r
In the above code, you're going to have to look up jQuery's load function if you don't understand it.
Now, the type of system you would like to develop is not a simple feat unless you've got a strong background in JS (not just jQuery) because you've got to understand what everything is doing.
If you are trying to piece this type of application together from snippets (like the one above), I'd advise you not to, as it can get quite complex.
The best thing you can start with is the concept. You said you've got the concept so that's a big hurdle done...after that, just look up what code you'll need to execute your process.