Urgent!!! How to retain current tab in jquery!!

Question

yopirates 0 Light Poster

14 Years Ago

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>

javascript jquery

2 Contributors
15 Replies
1K Views
1 Day Discussion Span
Latest Post 14 Years Ago Latest Post by yopirates

hielo 65 Veteran Poster

14 Years Ago

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.

hielo 65 Veteran Poster

14 Years Ago

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

hielo 65 Veteran Poster

14 Years Ago

do you have a link to your page?

hielo 65 Veteran Poster

14 Years Ago

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.

Reply to this topic

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.

yopirates 0 Light Poster · Answer 1 · 2010-09-20T22:04:35+00:00

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

yopirates 0 Light Poster · Answer 2 · 2010-09-21T17:15:01+00:00

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

yopirates 0 Light Poster · Answer 3 · 2010-09-21T20:03:37+00:00

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>

yopirates 0 Light Poster · Answer 4 · 2010-09-21T20:35:02+00:00

hielo i have my source file uploaded here http://rapidshare.com/files/420362979/tabs.zip
for the html file go to development-bundle>>demos>>tabs>>cookie.html

hielo 65 Veteran Poster · Answer 5 · 2010-09-21T20:59:19+00:00

Read ALL my comments on my post from Sep 20th, 2010, 23:43

http://plugins.jquery.com/files/jquery.cookie.js.txt

Be sure to save it as a js file

yopirates 0 Light Poster · Answer 6 · 2010-09-21T21:19:59+00:00

Hi hielo.. i read all ur comments.. but in http://plugins.jquery.com/project/cookie i did not get the actual plugin cookie.js .. it shows 256 pages :( i dint get the actual cookie.js :( :( can u get me the txt file of cookie.js

hielo 65 Veteran Poster · Answer 7 · 2010-09-21T21:22:27+00:00

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

yopirates 0 Light Poster · Answer 8 · 2010-09-21T21:33:21+00:00

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)

hielo 65 Veteran Poster · Answer 9 · 2010-09-21T22:24:22+00:00

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}});

yopirates 0 Light Poster · Answer 10 · 2010-09-21T22:27:57+00:00

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

yopirates 0 Light Poster · Answer 11 · 2010-09-21T22:50:15+00:00

yopirates 0 Light Poster

14 Years Ago

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