I'm using a basic implementation of Jquery UI Tabs that are working fine but I want to set (or reset) the active tab dynamically based on a user action.
How can I set the active tab based on a querystring value? With my previous tab solution I was able to pass a querystring value and set the active tab when the page loaded. (I had to abandon this older solution due to other technical challenges.)
When the user selects the Save button in my browser application, and the browser page reloads, how can I maintain focus on the tab they were on before they pressed save?
How can I set the active tab when a user returns to the Tasks page of my browser application? For example, all within my web application, if the user browses to the Projects page and then returns to the Task page, how can I reset the tab they were previously on?
Javascript:
$(function() {
$("#tabs").tabs();
});
HTML Example code:
<div id="tabs">
<ul>
<li>Description</li>
<li>Action</li>
<li>Resources</li>
<li>Settings</li>
</ul>
<div id="tabs-1">
<p>Description content</p>
</div>
<div id="tabs-2">
<p>Action content</p>
</div>
<div id="tabs-3">
<p>Resources content</p>
</div>
<div id="tabs-4">
<p>Settings </p>
</div>
</div>
I solved my own jQuery tab issues after additional research and trial and error. Here's a working example. I don't know if this is the most elegant solution but it works. I hope this helps.
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/redmond/jquery-ui-1.10.1.custom.min.css">
<script language="javascript" type="text/javascript" src="js/jquery/jquery-1.9.1.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery/jquery-ui-1.10.1.custom.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$("#tabs").tabs({active: document.tabTest.currentTab.value});
$('#tabs a').click(function(e) {
var curTab = $('.ui-tabs-active');
curTabIndex = curTab.index();
document.tabTest.currentTab.value = curTabIndex;
});
});
</script>
</head>
<body>
<form name="tabTest" method="post" action="tab">
<!-- default tab value 2 for Tab 3 -->
<input type="hidden" name="currentTab" value="2"/>
<div id="tabs">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
<div id="tabs-1">Tab 1 Content</div>
<div id="tabs-2">Tab 2 Content</div>
<div id="tabs-3">Tab 3 Content</div>
</div>
</form>
</body>
Here's how I answered each of my previous questions.
1. How can I set the active tab based on a querystring value?
I ended up not needing to use a querystring. I added the #tabs-x to the end of my url. For example, if I wanted a link directly to Tab 3 I coded a link as:
localhost:8080/pm/detail?prjID=2077#tabs-3
2. When the user selects the Save button in my browser application, and the browser page reloads, how can I maintain focus on the tab they were on before they pressed save?
I solved this by capturing the click event, getting the current tab index and then setting a hidden forms element "currentTab" to store the current tab value. Then back in the Java Servlet I retrieved the hidden forms elements and reset it when the page reloads.
$(document).ready(function() {
// Set active tab on page load
$("#tabs").tabs({active: document.tabTest.currentTab.value});
// Capture current tab index. Remember tab index starts at 0 for tab 1.
$('#tabs a').click(function(e) {
var curTab = $('.ui-tabs-active');
curTabIndex = curTab.index();
document.tabTest.currentTab.value = curTabIndex;
});
});
3. How can I set the active tab when a user returns to the Project page of my browser application? For example, all within my web application, if the user browses to the Task page and then returns to the Project page, how can I reset the tab they were previously on?
This is solved by setting a session variable in my Java Servlet to store the hidden forms element "currentTab". That way when I return the Project page, I can reset the "currentTab" value the same way I set it in the Save forms action.
I hope this example can help someone else with their jQuery tab issues!
jQuery UI Tabs can take in options. The ones that are particularly useful for your questions are cookie and selected. You can read about the options here.
var currentTab = $('.ui-state-active a').index();
currentTab = $('#divMainContent').find('#sel_tab')[0].value;
Note: Where Sel_tab is hidden field.
onclick on tabs achor link assign value to hidden feild
Related
I'm currently using tabs and want to select the same tab after a user has posted data and the page reloads.
Javascript:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var $items = $('#vtab>ul>li');
$items.mousedown(function() {
$items.removeClass('selected');
$(this).addClass('selected');
var index = $items.index($(this));
$('#vtab>div').hide().eq(index).show();
}).eq(0).mousedown();
});
</script>
Tabs:
<div id="vtab">
<ul>
<li class="user">User</li>
<li class="category">Category</li>
</ul>
<!--user-->
<div>Content</div>
</div>
<!--category-->
<div>Content</div>
</div>
Thank you!
One easy way is to post the data via XMLHttpRequest aka AJAX. That way, your whole page won't redirect. The other solution is to put the active tab in the URL. That has the side benefit of allowing bookmarks to return to the correct tab too. To put the tab in the URL, look at pushstate (and consider a polyfill/backwards compatible approach to work with browsers that do not have pushstate).
I'm using jQuery-UI tabs - five in total. Tab 1 has a form for entry which submits into MySQL (via AJAX). Tab 2 pulls data from MySQL, based on what was entered via Tab 1. When I click from Tab 1 to Tab 2, I want the 2nd tab to refresh. I cannot use an external files as advertised on the jQuery-UI API due to some conflicts with other code. I'm using the following:
Here's my JS:
$(function() {
$("#tabs3").tabs();
$("#tabs3").on('click','li',function(event,ui) {
$("#tabs3").tabs("load", "active");
});
});
Here's my HTML:
<div id="tabs3">
<ul class="no-print">
<li>Enter Report</li>
<li>My Reports</li>
</ul>
<div id="tabs-1">
<form name="form" id="form" method="post" action="scripts.php" novalidate>
// form inputs
</form>
</div>
<div id="tabs-2">
<h4>My Reports</h4>
<?php
// PHP scripts that spits out the output
</div>
What can I do to make it so when I click from one tab to the next, it refreshes the content? I'm not opposed to each tab refreshing, but I would like to choose which ones get refreshed and which ones don't if that's not difficult.
Well if you arn't using a source to load the tab you will need to manually refresh whatever content you need to refresh maybe retrieving the tab page via ajax?
However, you want to approach that part is up to you. But all this can be done inside of the jquery ui tabs callback "beforeActivate". Then in the parameters you can determine what tab it is and proceed with refreshing the content at that point.
$(function() {
$( "#tabs" ).tabs({
beforeActivate: function( event, ui ) {}
});
});
ref: http://api.jqueryui.com/tabs/#event-beforeActivate
And a simple fiddle
http://jsfiddle.net/zjrag3x0/
Am creating a web application having 4 tabs... Each tab contains a sidemenu (jQuery) and the remaining part is divided into 2, topdiv and bottom div (table with 2 colums.. col1=sidemenu, col2=topdiv+bottomdiv) ... I use
$("#topdiv").load("contents/abc.html #xyz")
To load contents of div xyz to topdiv, which(xyz) is in another page abc.html when I click a particular link in the sidemenu... But sometimes when #xyz will again have 4 or 5 tabs ,those tabs are not available as tabs in #topdiv... instead they appear as just list.. am using $("#___").tabs() for creating tabs...can anyone help me? I cannot add images here since am not having enough reputations in stack overflow. if some one provides ur email address I can attach images of my current status of page and those of which I need to design... here is part of ma code.
============================================================================
home.jsp
======================================================================
<div id="mainmenu" class="tabs">
<ul>
<li >tab1</li>
<li>tab2</li>
<li>tab3</li>
</ul>
<div id="tab1">
</div>
<div id="tab2">
<div id="topdiv">
</div>
<div id="bottomdiv">
</div>
</div>
<div id="tab3">
</div>
</div>
===========================================================================
abc.html
============================================================================
<div id="xyz">
<div id="innertabs" class="tabs">
<ul>
<li >inner tab1</li>
<li>inner tab2</li>
<li>inner tab3</li>
</ul>
<div id="innertab1">inner tab 1 contents</div>
<div id="innertab2">inner tab 2 contents</div>
<div id="innertab3">inner tab 3 contents</div>
</div>
</div>
===========================================================================================
main.js//javascript---jquery-ajax connected
===========================================================================================
$(".tabs").tabs();
$("#topdiv").load("contents/abc.html #xyz");
enter code here
========================================================================================
pls note that div '#mainmenu' is appearing in tab format... but "#innertabs" also having class "tabs" is not appearing in tab format.. instead they appear in #topdiv as lists and contents below it
===========================================================================================
I assume you using jquery ui tabs.
If so after loading other page content, apply again tabs function on main div
$( "#tabs" ).tabs();
Actually you should apply .tabs() after ajax content is loaded. Not before that. I am not sure if applying .tabs() twice may damage it.
Update:
Here is fiddle for you Example . then your code will be
$("#mainmenu").tabs();
$("#topdiv").load("contents/abc.html #xyz");
$("#innertabs").tabs();
atlast after a lot of researchs and experiments, i hav found a solution to this... actually i hav to use unique div ids for tabs instead of class = "tabs"... then the tab statement will change to $("#innertabs").tabs(); but to make sure that $().tabs() is invoked only after loading the contents, put that statement in a callback function of $().load()... so my actual problem was $("#innertabs").tabs() is invoked even before it is loaded into #topdiv from the page abc.html..hence they can be displayed only as lists as there is no div with id=innertabs at the time of $().tabs() is invoked. . now it is avoided and the working code is
$("topdiv").load("contents/abc.html #xyz",function(){$("#innertabs").tabs();});
so only after loading the div into topdiv, corresponding tabs are generated and thus it will be displayed as tabs itself
so i think its good to use a callback function all the time when u need this stuff to be done without any errors...
also if anyone came to know about the disadvantages of this method pls do post here.. it wll be helpfull for me as a fresher
looking forward to a career in software development...
I have a tab system in HTML that uses the following javascript:
(function() {
var $tabsNav = $('.tabs-nav'),
$tabsNavLis = $tabsNav.children('li'),
$tabContent = $('.tab-content');
$tabContent.hide();
$tabsNavLis.first().addClass('active').show();
$tabContent.first().show();
$tabsNavLis.on('click', function(e) {
var $this = $(this);
$tabsNavLis.removeClass('active');
$this.addClass('active');
$tabContent.hide();
$( $this.find('a').attr('href') ).fadeIn();
e.preventDefault();
});
})();
The HTML Markup is:
<ul class="tabs-nav">
<li class="active">
TAB 1
</li>
<li>
TAB 2
</li>
<li>
TAB 3
</li>
</ul><!-- end .tabs-nav -->
<div class="tabs-container">
<div class="tab-content" id="1">
CONTENT OF TAB 1
</div><!-- end #tab1 -->
<div class="tab-content" id="2">
CONTENT OF TAB 2
</div><!-- end #tab2 -->
<div class="tab-content" id="3">
CONTENT OF TAB 3
</div><!-- end #tab3 -->
The UL are the names of the tabs, when you click one they take you to the content of that tab. As you can see when you click a tab the link is www.thepage.com#tab1 etc but in the adress bar doesnt appear anything. I want to be able to go to thepage.com#tab2 and to show the tab 2, but this isnt working.
I had searched different methods like window.location in javascript or pushstate in html5 posted in this page but I didnt know how to make them function. It will be best to use thepage.com/tab1 and not the hash tag for SEO purposes. I know you can achieve this with the pushstate in html5 like:
window.history.pushState(“object or string”, “Title”, “/new-url”);
If you use the pushstate html5 feature it won't work with IE8 and other older browsers, but if you just want to be able to have ajaxy-history you can use the hash portion of the url. You can modify the hash of the url by using:
window.location.hash="mytabid";
// url will be http://foo.com/#mytabid
Using this inconjuction with the hash change event (you'll probably want to use jQuery or a plugin to handle cross-browser event issues) you can react on the use of the back button or when the page loads by accessing the location.hash property.
window.onhashchange = function(a){
console.log(a); //probably easiest to access the location.hash here.
}
i am using jquery accordion as a menu in asp.net Masterpage.
This is jquery
$(document).ready(function() {
$(".header").click(function() {
$(this).toggleClass("display");
$(this).next("div .menu_body").slideToggle(500);
});
});
This is html.
<div id="MasterPage_Menu" class="menu_list">
<p class="header">Header-1</p>
<div class="menu_body">
Link-1
</div>
<p class="header">Header-2</p>
<div class="menu_body">
Link-2
</div>
<p class="header">Header-3</p>
<div class="menu_body">
Link-3
</div>
</div>
According the code above, when the header is clicked, the content (menu_body) will be slided toggle.
The menu_body is hide at default, when the user click on the header, the menu_body is visible.
Example Problem: eg: 2 menu_body is visible, when i click on href = "page1.aspx", the page will be navigated to page2.aspx but the accordion will return to be default which all the menu_body is hidden.
Since I am using this accordion in master page, i fail to store the value to keep track of the accordion menu_body status into the hiddenfield when the page is navigated away. The value in hiddenfield will be reset.
I am thinking to store this in session, but in client page, it doesn't allow us to store value into the session.
Any solution for this?
If you add id attributes to your headers:
<p class="header" id="header-1">Header-1</p>
<div class="menu_body">
Link-1
</div>
Then you can pull the id out in your handler and use jquery.cookie to track the open panel in a cookie:
$(".header").click(function() {
var $this = $(this);
if(!$this.hasClass('display'))
$.cookie('open_panel', this.id);
$this.toggleClass("display");
$this.next("div .menu_body").slideToggle(500);
});
You'd need to play with the storage format for open_panel a bit if you want to have multiple panels open at one time but a simple CSV list would probably suffice; I'll leave that part as an exercise for the reader. You'd also want to check the cookie when the page loads and open the appropriate panels.
You could also keep track of the cookie's value on the server if you wanted to keep the setting around as part of the user's account preferences.