Solved

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

Posted on 2009-03-30
7
1,372 Views
Last Modified: 2012-05-06
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
Comment
Question by:bigMlittleC
  • 4
  • 3
7 Comments
 
LVL 19

Expert Comment

by:Albert Van Halen
ID: 24019819
Use this
$('#tabContainer ul').tabs({ selected: 3 });

Open in new window

0
 
LVL 19

Expert Comment

by:Albert Van Halen
ID: 24019835
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
 

Author Comment

by:bigMlittleC
ID: 24019863
I have tried it with 0, 1, 2 and 3 and it doesn't change it.
0
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 

Author Comment

by:bigMlittleC
ID: 24019915
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
 
LVL 19

Expert Comment

by:Albert Van Halen
ID: 24020057
Ah, you have to change the selector without the UL:
$('#tabContainer').tabs({ selected: 2 });

Open in new window

0
 

Author Comment

by:bigMlittleC
ID: 24020198
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
 
LVL 19

Accepted Solution

by:
Albert Van Halen earned 500 total points
ID: 24021898
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

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
phpmyadmin 3 32
how to use a function in heredoc 5 21
PHP get array item with custom id 4 21
PHP: Insert Data into MySQL 5 12
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn how to count occurrences of each item in an array.

911 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now