jQuery deep linking & ajax loading in multiple containers (sub containers)

Question

Hi!

I currently developing a site and have bumped into a problem.. (ajax loading stored urls) Thought someone could help..

First here is sample page layout:

<div id="main-container">
  <div id="top-menu">
    <a href="/link1" rel="ajax" />Link 1</a>
    <a href="/link2" rel="ajax" />Link 2</a>
  </div>
  <div id="content">
    <div id="results">
    <!-- category results go here -->
      <a href="/link1/category/cat-1/page/1" rel="ajax" />page 1</a>
      <a href="/link1/category/cat-2/page/2" rel="ajax" />page 2</a>         
    </div>
    <div id="categories">
      <a href="/link1/category/cat-1" rel="ajax" />cat 1</a>
      <a href="/link1/category/cat-2" rel="ajax" />cat 2</a>     
    </div>
  </div>
</div>

All is well if i want to load content by clicking links.. The hard part starts when I want to enable history support (create deep linkable urls)..

I cant figure out how to load necessary parts if full url is given e.g.

site.com/link1.html#/category/cat-1/page/

Some ideas I have:

1. Each link has an attribute that tells where to load the content
2. The url is sent to some controller that sends back data about where to load
3. The hash has multiple parts and can be split into array and then each part is loaded

Well the result should be somewhat like facebooks navigation where you can navigate between home page, messages, friends list without a page refresh.. And then in each of the places you can navigate by sublinks..

Answer 1

Check out Ben Alman's BBQ: Back Button & Query Library Plugin

Makes it really easy to add back button support

Answer 2

tnx :) had a look on this.. its a really nice plugin, however, after thinking a bit i figured out the part I was missing.. (probably should have included the js code)

var hash = window.location.hash.substr(1);
var href = $('a[rel=ajax]').each(function(){
    var href = $(this).attr('href');
            var where = $(this).attr('test');
            //alert(where);
    if(hash==href.substr(0,href.length-5)){
        var toLoad = hash+'.html';
        $('#content_full').load(toLoad)
    }                                           
});

those are the lines that are called if hash is found (after page load).. (i wanted to make the script a bit too advanced.. and instead of using a default container where data is loaded i wanted to take the location from url.. (dont ask why..))

so now everything should be working fine :) (I'll add a variable to each ajax link about what section it should load into, this data will then be sent to php script which will output the necessary data (only the wanted section), if this var won't be set the script will output full content)