asked on

jQuery Tab initiation after page load

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

R-Byter

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.

HainKurt

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

joshuajohnhutchison

ASKER

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

ASKER CERTIFIED SOLUTION

R-Byter

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

HainKurt

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

HainKurt

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

joshuajohnhutchison

ASKER

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

joshuajohnhutchison

ASKER

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

R-Byter

Thanks Joshua and llooking forward to help You more.