Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1411
  • Last Modified:

JQuery UI tabs Problem - Want to be able to select which tab to display on load

Hi,

I am using the JQuery UI Tabs api to display nested tabs. I want to be able to choose which tab gets displayed when the page is loaded (included the inner/nested tabs - if exists). Currently it shows the first tab by default. My code is shown below.

As I am using PHP forms on several of the tabs (including the nested tabs) and so would like to be able to reload the page with the previous outer tab selected (and even the inner/nested tab if it has one?) rather than the first tab always being displayed by default .

Thanks
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
        <script src="js/ui.core.min.js" type="text/javascript"></script>
        <script src="js/ui.tabs.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(function() {
                $('#tabContainer ul').tabs();
               //code below doesn't show tab 3 onload???
               var selected = $('.selector').tabs('option', 'selected');
                $('.selector').tabs('option', 'selected', 3);
                
            });
        </script>
 
<div id="tabContainer">
 <ul>
  <li><a href="#fragment-1"><span>TAB1</span></a></li>
  <li><a href="#fragment-2"><span>TAB2</span></a></li>
  <li><a href="#fragment-3"><span>TAB3</span></a></li>
 </ul>
 <div id="fragment-1">
  <ul class="innerNav" >
    <li><a href="#fragment-1a"><span>INNERTAB1</span></a></li>
    <li><a href="#fragment-1b"><span>INNERTAB2</span></a></li>
  </ul>
  <div id="fragment-1a" class="innerFragment"></div>
//php form here that i want to be able to come back to
  <div id="fragment-1b" class="innerFragment"></div>
  </div>
  <div id="fragment-2">
 </div>
  <div id="fragment-3">
 </div> 
</div>

Open in new window

0
bigMlittleC
Asked:
bigMlittleC
  • 4
  • 3
1 Solution
 
Albert Van HalenAnalyst developerCommented:
Use this
$('#tabContainer ul').tabs({ selected: 3 });

Open in new window

0
 
Albert Van HalenAnalyst developerCommented:
The tabs are zero based indexed : the first tab is 0, the second = 1, etc.
So use this
$('#tabContainer ul').tabs({ selected: 2});

Open in new window

0
 
bigMlittleCAuthor Commented:
I have tried it with 0, 1, 2 and 3 and it doesn't change it.
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
bigMlittleCAuthor Commented:
sorry, misread your example, that does work for the outer tab, however I would like to be able to choose the nested tab also.

For example, Tab 1 selected and then nested tab 3 selected (it currently shows the first nested tab)
0
 
Albert Van HalenAnalyst developerCommented:
Ah, you have to change the selector without the UL:
$('#tabContainer').tabs({ selected: 2 });

Open in new window

0
 
bigMlittleCAuthor Commented:
That didn't work i am afraid. The outer tabs were displayed (although styling had been affected) then when you click on a nested tab they disappear. The parent tab is then unusable.

any thoughts?
0
 
Albert Van HalenAnalyst developerCommented:
I created a testpage for you.
Just open it in the browser.

What it does :
It creates the tabs and selects the third tab by default.
It also creates the tabs within the content of first tab and the second tab is selected by default.

NB To create tabs in this kind of structure, the selector is the div; not the unnumbered list.
If you applied style in that manner you got it wrong.

Have a look at the jquery ui demo page : http://jqueryui.com/demos/tabs/

Good luck!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/ui-lightness/jquery-ui.css" />
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js" type="text/javascript"></script>
	<script type="text/javascript">
		$(function() {
			$('#tabContainer').tabs({ selected: 2 });
			$('#fragment-1').tabs({ selected: 1 });
		});
	</script>
</head>
<body> 
	<div id="tabContainer">
		<ul>
			<li><a href="#fragment-1"><span>TAB1</span></a></li>
			<li><a href="#fragment-2"><span>TAB2</span></a></li>
			<li><a href="#fragment-3"><span>TAB3</span></a></li>
		</ul>
		<div id="fragment-1">
			<ul class="innerNav" >
				<li><a href="#fragment-1a"><span>INNERTAB1</span></a></li>
				<li><a href="#fragment-1b"><span>INNERTAB2</span></a></li>
			</ul>
			<div id="fragment-1a" class="innerFragment">Content of inner tab 1</div>
			<div id="fragment-1b" class="innerFragment">Content of inner tab 2</div>
		</div>
		<div id="fragment-2"></div>
		<div id="fragment-3"></div> 
	</div>
</body>
</html>

Open in new window

0

Featured Post

Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now