jqueryui Tabs + onunload - javascript

I have jqueryui tabs on a page which, when clicking the "Tabs" links switches various <section> elements around my page, in other words, all my content is on one page (one file).
The problem I am having, is that on one <section> or one of the "Tabs" if you will, I want to make sure a user has filled out all fields / submitted a form before leaving that section. It is a multi-part multi ajax request form. Thus, if the user has filled out everything and submitted, that's ok. He can leave afterwards.
However, if the user begins the form submission, but doesn't complete, and tries to click on another tab, I want to have a popup like "Stay on Page, "Leave Page".
In the dom, there is I believe a onunload hook that I can use, but I don't know how to do this in jqueryui tabs. Any ideas what hook I can use with the plugin?
My jqueryui tabs code:
$(function() {
$( "#tabs" ).tabs();
});
My html structure:
The navigation:
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
The Content:
<div id="tabs" class="container">
<section id="tabs-1">
// Tabs 1 stuff goes here
</secion>
<section id="tabs-2">
// Tabs 1 stuff goes here
</secion>
<section id="tabs-3">
// Tabs 1 stuff goes here
</secion>
</div>

I think you can use something like this event http://api.jqueryui.com/tabs/#event-beforeActivate to achieve that.
$(function() {
$( "#tabs" ).tabs({
beforeActivate: function(e, ui){
if ( ui.oldTab.attr('id') == 'tabs-1' ) {
if (confirm('Sure you want to leave?')) {
return false
}
}
}
});
});

Related

how to close or return a loaded div to it's original state

I have an index.php with a #container div that has content, and an #open button.
on the page are also 2 tabs.
...
<div id="Tabs">
<div id="content1Tab"></div>
<div id="content2Tab"></div>
</div>
<div id="container">
<div id="content1">
..someContent...
<button id="open1">Open</button>
</div>
<div id="content2">
..someContent...
<button id="open2">Open</button>
</div>
</div>
clicking on content1Tab brings content1 to the forefront of container, using z-index.
clicking on content2Tab brings content2 to the front.
$(document).ready(function(){
$("#content1Tab, #content2Tab).click(function(event) {
var myString = $(this).attr('id');
var parts = myString.split("Tab");
var thePart = parts[0];
$("#content1, #content2).css('z-index', 7);
$("#"+thePart).css('z-index',9);
});
...
clicking on open1 successfully loads container with the contents of containerOther div from page.php.
$('#open1').click(function(){
$("#container").load("../page.php #containerOther> *");
});
I want a click on the tab to reload the original contents of the container. How can I do this?
I tried:
$("#content1Tab, #content2Tab).click(function(event) {
$("#container").load("../index.php #container > *");
....
});
but then the container stays on content1 no matter what tab I click on, and the open1 doesn't do anything. debugging showed that clicking doesn't enter the js code. I tried:
$("#container").load("../index.php #"+thePart);
the content changes according to the tab click, but the button still doesn't work.
both index and page have a link to the js file.
If I follow it correctly, it is chancing content of the #container where first the button was bound to jQuery functionality.
This way the binds will get lost and as result nothing happens when you click on those buttons again.
Solution is to bind again after the content has been refreshed, with a callback function I think:
$('#container').load("../index.php #"+thePart, function() {
$('#open1').click(function(){
$("#container").load("../page.php #containerOther> *");
});
});
I think a separate function for binding after the content refresh is better, because if you use the code here above, the binding problem will happens after the first successful content refreshment :).

i am struggling to add active class to my navigation menus with ajax

i used ajax on my site to load pages dynamically and add hashes to urls to preserve history and browser back button, and for this i am using jquery bbq plugin that is based on html5 history api and i have to say everything working fine except one issue and that is active class to current link.
i have two navigation main menu which is only on homepage and a second one is included on every page with php include function and its kind of a subnav of main menu.
as i said my problem is how to add active class to any link that is clicked so its look different from others and users should know where they are right now!
i tried different techniques but those only works with main menu and some kind of problem with secondary nav for better understanding please watch this video
as you can see in the video it works fine on main menu but only adds class to the secondary menu after click once on any link then click another link and then click back to original link, moreover when i refresh it removes the active class.
here is my code.
main menu
<div id="vertical-menu">
<!--<h2 class="logo">LOGO</h2>-->
<div class="logo">
<span class="arcd-male97"></span>
<h2 class="logo-name">AMR</h2>
<h6 class="logo-desc">ARCADE MUSIC REPOSITORY</h6>
</div>
<nav>
<ul id='menu' class="menu-items">
<li><i class="arcd-archive"></i></br>Browse</li>
<li><i class="arcd-music97"></i></br>Top albums</li>
<li></i></br>Top artists</li>
<li></i></br>Top lists</li>
<li></i></br>Charts</li>
</ul>
</nav>
</div>
secondary navbar
<div class="header_container" id="header_container"> <!--start header div-->
<div id="header_titles">
<h1 class="browse-heading">BROWSE</h1>
<h2 class="browse-subheading">GENRES & MOODS</h2>
</div>
</div> <!--end header div-->
<div id="tabnav_container"> <!--start tabnav_container-->
<div class="navtab_background"></div>
<nav>
<ul id="tabnav">
<li class="pop_tab"><i class="arcd-microphone352"></i>pop</li>
<li class="country_tab"><i class="arcd-guitarcountry"></i>country</li>
<li class="rock_tab"><i class="arcd-electricclone"></i>rock</li>
<li class="blues_tab"><i class="arcd-harmonicblues"></i>blues</li>
<li class="edm_tab"><i class="arcd-disc62edm"></i>edm</li>
<li class="jazz_tab"><i class="arcd-trumpet12jazz"></i>jazz</li>
<li class="rnb_tab"><i class="arcd-mic102"></i>r&b</li>
<li class="hip-hop_tab"><i class="arcd-musicplayer1hiphop"></i>hip hop</li>
<li class="reggae_tab"><i class="arcd-mic102"></i>reggae</li>
<li class="classical_tab"><i class="arcd-violin62classical"></i>classical</li>
<li class="folk_tab"><i class="arcd-guitar92folk"></i>folk</li>
<li class="soul_tab"><i class="arcd-mic102"></i>soul</li>
</ul>
</nav>
</div><!--end tabnav_container-->
and this is ajax script
$(function() {
// Keep a mapping of url-to-container for caching purposes.
var cache = {
// If url is '' (no fragment), display this div's content.
'': $('#default-homepage-contents')
};
// Bind an event to window.onhashchange that, when the history state changes,
// gets the url from the hash and displays either our cached content or fetches
// new content to be displayed.
$(window).bind( 'hashchange', function(e) {
// Get the hash (fragment) as a string, with any leading # removed. Note that
// in jQuery 1.4, you should use e.fragment instead of $.param.fragment().
var url = $.param.fragment();
// Hide any visible ajax content.
$( '#main-container' ).children( ':visible' ).hide();
if ( cache[ url ] ) {
// Since the element is already in the cache, it doesn't need to be
// created, so instead of creating it again, let's just show it!
cache[ url ].fadeIn(1000);
} else {
// Show "loading" content while AJAX content loads.
$( '#loading' ).delay(500).show();
// Create container for this url's content and store a reference to it in
// the cache.
cache[ url ] = $( '<div class="bbq-item"/>' )
// Append the content container to the parent container.
.appendTo( '#main-container' )
// Load external content via AJAX. Note that in order to keep this
// example streamlined, only the content in .infobox is shown. You'll
// want to change this based on your needs.
.load( url, function() {
// Content loaded, hide "loading" content.
$( '#loading' ).fadeOut(1000);
});
}
})
// Since the event is only triggered when the hash changes, we need to trigger
// the event now, to handle the hash the page may have loaded with.
$(window).trigger( 'hashchange' );
});
thanks for any help!
I had problems with new browsers and found this, I think the only correctly working plugin: jquery address
and docs are here: http://www.asual.com/jquery/address/docs/#api-reference example usage is
$(function() {
//push it to history
$('#tabnav > li').click(function(e) {
e.preventDefault();
$.address.parameter("browse", $(this).attr("href"), false);
});
//catch changes
$.address.change(function () {
$.each($.address.parameterNames(), function (index, value) {
url = $.address.parameter(value);
$('a[href="'+url+'"]').addClass('active');
});
});
});

jQuery-UI tabs not refreshing dynamic content

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/

tabs from another html page inside a tab of my html page -web application user interface

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

Set Jquery ui active tab on page load/reload

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

Categories

Resources