jQuery Tab initiation after page load

joshuajohnhutchison
joshuajohnhutchison used Ask the Experts™
on
I have a series of jquery tabs that have forms with text fields inside each tab.  One of them for example is a form that allows you to change your password.  When I submit the form, I do so with a hidden field so that the same page just reloads and the value of that hidden field determines which php script to run at the top of the page.  

My problem is that when the page reloads, it always returns to the first tab rather than the tab with the form I submitted.  This is causing me a problem because my error messages are also inside the tabs with their respective forms, so for example if I submit the change password form inside tab3 and an error message fires inside tab3 because the user mistyped their existing password, the user won't see it because when he page reloads they see tab0 again.  If they were to select tab3 again after the reload they would see the error message, but why would they do that if they think they just successfully changed their password and they didn't know an error message fired?

So anyway, I need my script to call the tab I was in before the page reloaded.  I'm sure its something simple like using a post variable but I haven't yet learned how to pass variables between pages in jquery.  So if you could help me out and hook up my script, I'd appreciate it.  I'm just using the standard tabs script below.




$(function() {
		$("#tabs").tabs();
	});

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Top Expert 2010

Commented:
If You are using  jQuery UI Tabs it should be:

$('#tabs').tabs(2);

Where 2 is the tab You want. Notice that indexes start from 0, not 1, so third one is marked 2.
If You didnt use jQuery UI Tabs, please post a link to a page or tell the plugin You are using.
HainKurtSr. System Analyst

Commented:
use something like this

var param = $('#selectedTab').val();
$('#menu').tabs('select', param);

to select the tab, also selectedTab is a hidden variable on the page... you set it on server... or on some click of tab...

Author

Commented:
R-Byter,  yeah I know about the indices starting at 0.  I was just making an example.  There is actually 7 tabs in my page, but anyway, I have attached an example page you can work with to figure it out.

HainKurt,  I tried plugging that in and I couldn't figure it out.  I attached an example page so you can just play with it yourself.
tabs-test.php
Success in ‘20 With a Profitable Pricing Strategy

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Top Expert 2010
Commented:
Here You go, this i what I come up with quick. Modify it upon Your needs.

Regards
Bosko




<?php 

$select_tab = "0";
$editFormAction = $_SERVER['PHP_SELF'];
if (isset($_SERVER['QUERY_STRING'])) {
  $editFormAction .= "?" . htmlentities($_SERVER['QUERY_STRING']);
}
		if ((isset($_POST["MM_update1"])) && ($_POST["MM_update1"] == "form1")) {
		  	$tab0_error = "Example 1 error!";
			$select_tab = "0";
		}
		elseif ((isset($_POST["MM_update2"])) && ($_POST["MM_update2"] == "form2")) {
  		  	$tab1_error = "Example 2 error!";
			$select_tab = "1";
		}
		elseif ((isset($_POST["MM_update3"])) && ($_POST["MM_update3"] == "form3")) {
  			$tab2_error = "Example 3 error!";
			$select_tab = "2";
		}
		
?>

<script type="text/javascript">
	jQuery(document).ready(function() {
		jQuery('#tabs').tabs({selected: <?=$select_tab;?>});
	});
</script>

Open in new window

HainKurtSr. System Analyst

Commented:
tested this one and works fine:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hainkurt's JQuery Tab Demot</title>
<link href="js/jquery-ui-1.7.2.custom.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>
<script type="text/javascript">
	$(function() {
		$("#mytabs").tabs();
		var param = $('#selectedTab').val(); 
		alert(param);
    $('#mytabs').tabs('select', param);
	});
</script>
</head>

<body>

<form id=myForm>
	<input type=hidden id=selectedTab value=2 />
<div id="mytabs">
    <ul>
        <li><a href="#fragment-1"><span>One</span></a></li>
        <li><a href="#fragment-2"><span>Two</span></a></li>
        <li><a href="#fragment-3"><span>Three</span></a></li>
    </ul>
    <div id="fragment-1">
        <p>First tab is active by default:</p>
        <pre><code>$('#example').tabs();</code></pre>
    </div>
    <div id="fragment-2">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    </div>
    <div id="fragment-3">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    </div>
</div>
</form>

</body>
</html>

Open in new window

HainKurtSr. System Analyst

Commented:
but I guess tabs are not 0 based, 1 selects first one, documentation says 0 is the first one ;)

Author

Commented:
Yep, you got it Bosco.  Thanks a lot.  Well done.

Author

Commented:
Sorry HainKurt, Bosco beat you to the punch.  Thanks a lot for your help anyway.  Don't worry though, I got many more 500 pointers coming :)
Top Expert 2010

Commented:
Thanks Joshua and llooking forward to help You more.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial