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?

Solution 1

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).

Solution 2

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;
        });
    });

Solution 3

I've got a slightly different approach that doesn't necessarily rely on the built-in select() function, but does use the livequery plugin:

http://plugins.jquery.com/project/livequery/

which is a more powerful version of the jQuery live function. It can easily bind future elements that match a query.

Suppose you have a tabs structure as follows:

<div class="Tabs">
<ul class="nav">
<li><a id="tab1">Link 1</a></li>
<li><a id="tab2">Link 2</a></li>
<li><a id="tab3">Link 3</a></li>
</ul>
..
..
</div>

ideally, you want a URL structure like this:

mydomain/mypage?tab=tab2

it becomes quite tricky because the select() method only supports integer indices, and what happens when you change your tabs around?

Supposing you can get the url parameter into a variable as indicated above to do the following:

First you locate your target element and add a class to it:

jQuery('a#' + param).addClass('selectMe');

Next you bind a livequery function to the element:

jQuery('.ui-tabs-nav a.selectMe').livequery(function(){
 jQuery(this).removeClass('selectMe').triggerHandler('click');
});

This will match it only once it's been tab-ified and virtually 'click' it.

Then, you can call your tabs function with no parameters:

jQuery(".Tabs").tabs();

and once it's complete, the tab will automatically be clicked and selected!

Better yet, you can bind the tabs creation to livequery itself:

jQuery(".Tabs").livequery(function(){
    jQuery(this).tabs();    
});

so that any elements you have with class '.Tabs' will automatically be converted into tabs upon load, now or in the future!

Solution 4

The following link of a jQuery plugin seems a possible candidate for a solution, as it provides you with the URL and the component parts. You would then be able to match the value with either the index of the tab you want to select or by id or class through the jQuery selector:

http://www.oakcitygraphics.com/jquery/jqURL/jqURLdemo.html?var1=1&var2=2&var3=3

View more solutions

Comments

[Stan]

@kralco626 : docs.djangoproject.com/en/dev/#the-view-layer is not an invalid syntax. Cheers.

[kralco626]

correct you are :) It took you 6 months to figure that out? ;)

[Stan]

No it tooks me 6 months to forget how to do !