CODEWITHSUNDEEP
jqueryjquery-uitabs
David Snowsill
David Snowsill

Reputation: 1537

Selecting a jQuery Tab using a parameter in the URL

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?

Upvotes: 20

Views: 68808

Answers (4)

zihotki
zihotki

Reputation: 5191

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

Upvotes: 22

Stan
Stan

Reputation: 8966

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

Upvotes: 26

REA_ANDREW
REA_ANDREW

Reputation: 10764

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

Upvotes: 1

artsy.ca
artsy.ca

Reputation: 134

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!

Upvotes: 1

Related Questions