Links to AJAX URLs

Question

I've got a page on my site that requests quite a bit of content via AJAX. The problem I've run into is that if you've been poking around on the site and are on a page that doesn't technically have a URL, you can't copy/paste the URL and send it to someone, since you'll just end up on the home page.

I was looking at facebook, and they use an anchor for a URL that's been requested past the original URL, like this: http://www.facebook.com/#/somepage (if you were on the home page and went to somepage, and that's an AJAX request).

Setting an anchor on the URL wouldn't be a problem at all, since I use <a> tags for all my AJAX stuff anyway, but how would I be able to get mysite.come/#/some-ajax-page/ to work properly and display what some-ajax-page should be and not just try to find the anchor named /some-ajax-page/ in the DOM?

P.S. I use jQuery for my JS and Django server-side

Answer 1

You can refer to the URL of the current page using the document.location object. This is not standard, but nonetheless, every browser I know supports it. The hash property of that object gives you the part behind the hash sign.

So, in your jquery .ready function, you could probe document.location.hash (for your example url http://www.facebook.com/#/somepage that would evaluate to /somepage), and interpret it to do whatever is necessary to recreate the appropriate state of you page. What logic you need to do here, is of course up to you - we can't smell what states your pages can have, and how you want to represent those in the anchor text.

For more information, see the mozilla documention of the location object. AFAIK all browsers support these properties: https://developer.mozilla.org/en/DOM/window.location

Answer 2

Just get the fragment from the requested URL (you may need to use request.get_full_path() for this), and then construct your page properly on the server.

Answer 3

Check out jQuery BBQ. We used something similar on a project recently, and it was pretty slick.

The basic idea is to listen for changes in the hash and run functions (ie fetch a new page via ajax) based off the hash.