Ajax tabs in Web app

Question

We have the application with tabs interface. Currently each tab is loaded as the separated page. And now we need to rework it in the way that tab content should be loaded via ajax.

Unfortunately just load the content is with Ajax not enough. User should be able to add to bookmarks each tab. That is why the entire URL should change on tab switch. Also indexing bots should not have problems on following the link in the tab.

I saw a nice solution on Facebook tabs: they use the anchor to store the URL like this: http://www.facebook.com/profile.php?v=info&ref=profile&id=1241403629#/profile.php?v=wall&ref=profile&id=1241403629

How can I implement this solution with jQuery? Is there a ready to use plugin?

Also cool thing is that after a click on such bookmark Facebook automatically redirects me to: http://www.facebook.com/profile.php?v=wall&ref=profile&id=1241403629

How is that possible?

Answer 1

Try looking at this question:

http://stackoverflow.com/questions/813601/jquery-ui-tabs-back-button-history

Answer 2

You can indeed pass a parameter via the query string or use an anchor...

You delay the load of the tabs on the page load, you check the parameter, then you load the appropriate tab.

Example if you have:

/yoururl.aspx#section1

On the page load you do (EDIT: see my comment below):

$('#tabs_placeholder').load('url_of_tab_1');

You conditionally do this for all of your tabs

This solutions works for bookmarks because the anchors and the query string are kept as well as the URL.

Hope this helps

PS. Here is the documentation of the load function and other jQuery AJAX functions: http://docs.jquery.com/Ajax