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?
Try looking at this question:
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