I am currently creating a webpage using Jquery UI tabs. There are 3 tabs , where in the first tab just displays a message saying "hello" and "have a great day". the 2nd and the 3rd tab have another page which performs some operation. The pages have a place to upload a file, and once a button is clicked, it perform some operations on the file and the result is displayed in a text box. Now the problem is as soon as i click a button in any of these 2 pages, my main page gets redirected to the first tab which displays "hello". How do I change my code so that my 2nd or 3rd tab is intact even after I submit a button?
My Javascript:
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(function()
{
$("#menu ul li a").each(function() {
$(this).removeClass("active");
});
$("#menu ul li a").click(function(e) {
e.preventDefault();
$("#menu ul li a").each(function() {
$(this).removeClass("active");
});
$(this).addClass("active");
});
$("#menu").tabs({ fx: {opacity:"toggle"}} );
});
and my HTML code:
<body background="wood_bg.jpg" >
<div id="menu">
<ul>
<li> <a href="#tab-1" >Welcome</a></li>
<li> <a href="#tab-2" title="Decode">Decode Support key</a></li>
<li> <a href="#tab-3" title="Response">Response Generator</a></li>
</ul>
<div id="tab-1" >
<div id ="main">
<p> HELLO </p>
<p> HAVE A GREAT DAY </p>
</div>
</div>
<div id="tab-2">
<div id ="main">
<p> MY 2nd TAB PAGE HERE </p>
</div>
</div>
<div id="tab-3">
<div id ="main">
<p> MY 3nd TAB PAGE HERE </p>
</div>
</div>
You can redirrect from your conroller to the page with parameter e.g. ?tab=3
On your page make JS to analyse 'page' parameter and show the proper tab, something like that:
$(function() {
// get params from window.location.href
var tab = params.tab || 1;
$("#tab-"+tab).click();
});
How to get params from location - for example here: http://blogosys.com/2011/09/how-to-read-url-parameters-from-address-bar-using-javascript.html