Selecting a jQuery Tab using a parameter in the URL

Question

I am currently investigating replacing the tabs provided by a Struts 1 tag library with the tabs provided by jQuery UI. I have successfully managed to get the tabs integrated with the existing application but I am struggling on how to set the selected tab using a parameter on the incoming URL, that is myurl.com/action.do?selectedTab=SecondTab.

I am a newcomer to JavaScript and jQuery; what are some pointers on where to start?

Answer 1

Jquery-UI give you that for (almost) free : Use the internal links. And it's better than using ugly get parameters.

Passing http://my.site.org/mypage/#foo-tab in your navigator will automaticly select the tab with the container having id="foo-tab".

The trick is to add an event to update the url when selecting a tab so that when you reload you do not lose the current tab :

   $(document).ready(function () {
        $("#tabs").bind('tabsselect', function(event, ui) {
            window.location.href=ui.tab;
        });
    });

Answer 2

Using http://www.mathias-bank.de/2007/04/21/jquery-plugin-geturlparam-version-2:

$(document).ready(function(){
    var param = $(document).getUrlParam('selectedTab');
    $('#menu').tabs('select', param);
});

From documentation:

#select

Signature:

.tabs( 'select' , [index] )

Select a tab, as if it were clicked. The second argument is the zero-based index of the tab to be selected or the id selector of the panel the tab is associated with (the tab's href fragment identifier, e.g. hash, points to the panel's id).