Here in the second tab i have a submit button .when i enter some value in the textfield of second tab(tab2) and give submit its again going back to first tab(tab1) .What i want is after i click submit in tab2 it has to be in tab2 oly.It has to be in current tab

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>jQuery UI Tabs - Default functionality</title>
	<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
	<script type="text/javascript" src="../../jquery-1.4.2.js"></script>
	<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
	<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
	<script type="text/javascript" src="../../ui/jquery.ui.tabs.js"></script>
	<link type="text/css" href="../demos.css" rel="stylesheet" />
	<script type="text/javascript">
	$(function() {
		$("#tabs").tabs();
	});
	</script>
</head>
<body>
 
<div class="demo">
 
<div id="tabs">
	<ul>
		<li><a href="#tabs-1">Nunc tincidunt</a></li>
		<li><a href="#tabs-2">Proin dolor</a></li>
		<li><a href="#tabs-3">Aenean lacinia</a></li>
	</ul>
	<div id="tabs-1">
		<form name="input"  method="get">
Username1: <input type="text" name="user" />
<input type="reset" value="Start Over" />
	</div>
	<div id="tabs-2">
		<form name="input"  method="get">
Username2: <input type="text" name="user" />
<input type="submit" value="Submit" />
</div>
	<div id="tabs-3">
		<<form name="input"  method="get">
Username3: <input type="text" name="user" />
<input type="reset" value="Start Over" />
	</div>
</div>
 
</div><!-- End demo -->
 
<div class="demo-description">
 
</div><!-- End demo-description -->
 
</body>
</html>

Recommended Answers

All 15 Replies

Before answering your question, make sure you close your <FORM> tags at the end of each tab. Otherwise you will get unexpected behaviour across browsers.

As for your problem, the easiest approach to your problem is to bind an onsubmit method to your forms and submit an ajax request. That way the browser would not reload the page.

Alternatively, you can bind an onclick method/function to each of your tabs and create a cookie. When the page reloads, you will need to read that cookie and in init code for your tabs use that cookie to specify which tab to show first.

thanks hielo.. can u just guide me n help in the cookie thing :) coz m new to it :)

actually, instead of:

<script type="text/javascript">
    $(function() {
        $("#tabs").tabs();
    });
    </script>

use:

<script type="text/javascript">
    $(function() {
        $("#tabs").tabs({ cookie: { expires: 30 } });
    });
    </script>

BUT make sure you also import a copy of the cookie.js plugin:
http://plugins.jquery.com/project/cookie

Hi helio.. i just modified my code with the changes u told even then after submit/reload its coming to the first tab oly :( pls helio help me ..

do you have a link to your page?

Hielo i dont have link of the page .. i have the source code which i posted below or if possible help me with an example :)

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>jQuery UI Tabs - Default functionality</title>
	<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
	<script type="text/javascript" src="../../jquery-1.4.2.js"></script>
	<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
	<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
	<script type="text/javascript" src="../../ui/jquery.ui.tabs.js"></script>
	<link type="text/css" href="../demos.css" rel="stylesheet" />
	<script type="text/javascript">
	$(function() {
		$("#tabs").tabs();
collapsible: true;

//var current_index = $("#tabs").tabs("option","selected");
//$("#tabs").tabs('load',current_index);
//select:function reloadtab(){ 
		  
  // $('#tabs').tabs('load', $('#tabs').tabs('option', 'selected'));
//});
//});
//function select0(){
//$( "#tabs-1" ).tabs({ selected: 0 });
//}
//function select1(){
//$( "#tabs-2" ).tabs({ selected: 1 });/
//}
//function select2(){
//$( "#tabs-3" ).tabs({ selected: 2 });
//}
)};



	</script>
</head>
<body>
 
<div class="demo">
 
<div id="tabs">
	<ul>
		<li><a href="#tabs-1">Nunc tincidunt</a></li>
		<li><a href="#tabs-2">Proin dolor</a></li>
		<li><a href="#tabs-3">Aenean lacinia</a></li>
	</ul>
	<div id="tabs-1">
		<form name="input"  method="get"  >
Username1: <input type="text" name="user" />
<input type="submit" value="Start Over" />
</form>

	</div>
	<div id="tabs-2">
		<form name="input"  method="get" >
Username2: <input type="text" name="user" >
<input type="submit" value="Submit"/ />
</form>
</div>
	<div id="tabs-3">
		<<form name="input"  method="get" >
Username3: <input type="text" name="user"  />
<input type="submit" value="Start Over"  />
</form>
	</div>
</div>
 
</div><!-- End demo -->
 
<div class="demo-description">
 
</div><!-- End demo-description -->
 
</body>
</html>

I noticed your source code on the original post, but I don't have all those file you are using nor an available server to upload them to.

On another note, I clearly stated that you should be including the jquery COOKIE plugin. I don't see that in your code anywhere. Without it, my previous suggestion will never work.

my previous comment has a direct link to it (I just updated it).

Hielo.. i copied tat cookie.js txt file which u gave.. and i saved it as cookie.js also and then i liked in <script type="text/javascript" src="cookie.js"></script> then also when i click 2nd tab(index 1) and give submit ther its agoin going to tab 1(index 0)

Open FF, and install the following:
https://addons.mozilla.org/en-US/firefox/addon/60/

Restart FF and then open your page. Once your page loads, on the developer bar click on "Information > View Javascript"

You should see ALL the javascript code of that page OR an error indicating if the file did not load.

Make sure all the js is loaded properly. It seems to be working fine for me when I linked to the cookie.js file AND I used

$('#tabs').tabs({cookie:{expires:30}});

Il try it Hielo i was using google chrome .. it dint work il dwld FF and try :)

Thanks Hielos.. IT WORKED!!!! :) :)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.