I have a tabed screen and want to trigger a click on the selected tab once the form is submitted and the return is valid. Here a part of the html:
<ul id="tabUL" class="tabs js-tabs same-height">
<li class="current">
<a class="tabLink" href="#tabProducts" data-url="/bla/bla">Products</a>
</li>
</ul>
My success command is :
success: function(data, textStatus, XMLHttpRequest) {
$('#tabUL').find('li.current a').trigger('click');
}
This seems not working... Any help is appreciated :) Regards Andrea
Try using the a[href=""] selector:
$('#tabUL a[href="#tabProducts"]').trigger('click');
I put together a jsfiddle demo to show it in action, and how to optionally hide the other tabs since often when I'm programmatically forcing tabs its to require missing mandatory information be entered on the initial tab before unlocking the other tabs...
Edit
Here is the contents of the jsfiddle:
HTML
<div id="tabs">
<ul>
<li>Address</li>
<li>Shipping</li>
<li>Parts</li>
<li>Datasheets</li>
</ul>
<div id="tab0">
<h1>This is the first tab (0)</h1>
</div>
<div id="tab1">
<h1>This is the second tab (1)</h1>
</div>
<div id="tab2">
<h1>This is the third tab (2)</h1>
</div>
<div id="tab3">
<h1>This is the fourth tab (3)</h1>
</div>
</div>
<br/>
Select the
<select id="tabSelect">
<option value="0">1st</option>
<option value="1">2nd</option>
<option value="2">3rd</option>
<option value="3">4th</option>
</select>Tab and
<input type="checkbox" id="tabHide" checked="checked" /> Lock the Others
jQuery
$(document).ready(function () {
$('#tabs').tabs();
$('#tabSelect').change(function () {
//pass empty array to unlock any locked tabs
$('#tabs').tabs({disabled: []}).find('a[href="#tab' + $(this).val() + '"]').trigger('click');
if ($('#tabHide').prop('checked')) {
//hide will be an array like [0,2,3]
var hide = Array();
$('#tabs li').not('.ui-tabs-active').each(function () {
hide.push($(this).index());
});
$('#tabs').tabs({disabled: hide});
}
});
});
If you want to reload the tab programmatically then i recommend use Jquery Tab API utility like below:
This makes first tab active and then activates second tab, quite simple and also raises the events that would be normally raised when you click directly.
$( "#myTabs" ).tabs( "option", "active", 0 );
$( "#myTabss" ).tabs( "option", "active", 1 );
Also you can catch tabs active event like below for performing any operations
$( "#myTabs" ).on( "tabsactivate", function( event, ui ) {
// your custom code on tab click
});
rather than trying to trigger the click event itself (which I believe is not possible to invoke a user event programatically in this context), I suggest that you trigger the function that has to be called on click event, you might want to look into triggerHandler
Related
This question already has answers here:
Remember which tab was active after refresh
(17 answers)
Closed 6 years ago.
i am trying to have the last selected tab, after page refresh. My code is below.By this code always first tab is in active after page reload.
javascript
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
html:
<body>
<div id='childarpt' class='childarpt' ></br>
<div id="tabs"><ul>
<li class="active"><span>Total</span></li>
<li><span>USA</span></li>
<li><span>ASIA</span></li>
<li><span>JAPAN</span></li>
<li><span>LATAM</span></li>
<li><span>EMEA</span></li>
</ul>
<table id='myTable' border='0'>
<div id="Total" class="tab active">
Total
</div>
<div id="USA" class="tab">
USA
</div>
<div id="ASIA" class="tab">
ASIA
</div>
<div id="JAPAN" class="tab">
JAPAN
</div>
<div id="LATAM" class="tab">
LATAM
</div>
<div id="EMEA" class="tab">
EMEA
</div>
</table>
</div>
</body>
A quick and dirty solution to your issue
$(function() {
var tabs = $( "#tabs" )
tabs.tabs({
activate: function(e,ui) {
var index = ui.newTab.index()
location.hash = index;
},
active: location.hash.replace(/#/,"") || 0
});
});
You will need to change the storing and loading of the state, but this will set you off.
Instead of
$(function() { $( "#tabs" ).tabs(); });
Try this:
$( "#tabs" ).tabs({ active: 5 });
This will make the sixth (it is zero-indexed) tab the default active tab.
for your reference : http://api.jqueryui.com/tabs/
Refer to Bootstrap 3: Keep selected tab on page refresh, it contains all the information you need to implement what you want.
The idea is to store the selected tab in the hashvalue of the window. Change the hash of the location when another tab is selected.
I using phonegap with jquery, jquery mobile min and a custom page swipe code to build an app. It is basically one main menu, leading to ten sub-menus, leading to approx 200 static html pages.
I combined it all into one single page so that it didn't have to reload the scripts every page change. This worked initially, but as I continued to add to the page, after a certain point in the page none of the links work, nothing happens when they are clicked.
I'm confident it's not a problem with the html for those links, every link after that point fails. If I cut/paste the link to the start of the doc it works fine, but then the next in line after it's original position no longer works.
At the point it stopped, the page was approx 250kb in size and 3500 lines of code.
I temporarily fixed it by creating 10 single pages, one for each submenu, which does work, but introduces it's own problems that I want to avoid if I can.
Do phonegap, jquery, or jquery mobile min have caps on how large a single page can be before they start to ignore the remainder of the code? And is there anything I can do to get around this?
This is the custom scrolling script I am using:
function navnext( next ) {
$( ":mobile-pagecontainer" ).pagecontainer( "change", next, {
transition: "none"
});
}
function navprev( prev ) {
$( ":mobile-pagecontainer" ).pagecontainer( "change", prev, {
transition: "none",
reverse: true
});
}
$( document ).one( "pagecreate", "#page1", function() {
// Handler for navigating to the next page
// Navigate to the next page on swipeleft
$( document ).on( "swipeleft", ".ui-page", function( event ) {
// Get the filename of the next page. We stored that in the data-next
// attribute in the original markup.
var next = $( this ).jqmData( "next" );
if ( next ) {
navnext( next );
}
});
// The same for the navigating to the previous page
$( document ).on( "swiperight", ".ui-page", function( event ) {
var prev = $( this ).jqmData( "prev" );
if (prev) {
navprev( prev );
}
});
});
And this is what the html looks like:
<i></i><!DOCTYPE HTML>
<html>
<head>
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile.min.js"></script>
<script src="js/jqueryswipegrey.js"></script>
<link rel="stylesheet" href="css/deck.css"></link>
</head>
<body>
<div class="title"><h1> App Title</h1><img class="home" src="img/home.png"></div>
<!-- -------------------------------MAIN MENU-------------------------------------------------------------------------------------------------- -->
<div id="page1" data-role="page" data-prev="#page1" data-next="#pagesub1"><div class="wrapper"><ul data-role="listview" data-inset="true"><h2>
Main Menu
</h2></ul> <div data-role="content">
<font size="4">
<p class="line"><img src="img/redline.png" width="100% of window";></p>
<p class="menu"> <a class="link" href="#pagesub1"><img class="smallcardplot" src="img/01001.jpg"> Link to First Submenu</a></p>
<p class="line"><img src="img/redline.png" width="100% of window";></p>
And then:
<div id="pageplot" data-role="page" data-prev="#page1" data-next="#pagesubmenu2"><div class="wrapper"><ul data-role="listview" data-inset="true"><h2>
1st Submenu
</h2></ul> <div data-role="content">
<font size="4">
<p class="line"><img src="img/redline.png" width="100% of window";></p>
<p class="menu"> <a class="link" href="#page01001"><img class="smallcardplot" src="img/01001.jpg"> First Plot Page</a></p>
<p class="line"><img src="img/line.png" width="100% of window";></p>
And then:
<div id="page01001" data-role="page" data-prev="" data-next="#page01002"><div class="wrapper"><ul data-role="listview" data-inset="true"><h2>
First Content Page
</h2></ul> <div data-role="content">
<img src="img/01001.jpg" class="plotimg"> <ul data-role="listview" data-inset="true">
<p>A few lines of text for this page
</ul></div></div></div>
I'd messed up an html tag. Fixed now.
have been struggling a bit with this.
How can I determine whether my jquery accordion tab is opened or closed?
<div id="accordion3" class="accordion">
<!-- D1 -->
<h3 class='ach plus' id="1">Assignment Initiation Form</h3>
<div style="width:100%;">
content
</div>
<!-- D2 -->
<h3 class='ach plus' id="2">Flag potential candidates</h3>
<div style="width:100%;">
content
</div>
</div>
was thinking along the lines of
$(document).on("opened", #accordion3, function(){
var id = $(this).find("id");
$(id).removeClass("plus").addClass("minus");
});
I want to swop a class from 'plus' to 'minus' on opening of accordion and vice versa.
help appreciated
$( ".selector" ).accordion({
beforeActivate: function( event, ui ) {
//write your code here
ui.newHeader.removeClass('minus').addClass('plus');
$('.ach').not('.plus').addClass('minus');
}
});
This link will help you know more http://api.jqueryui.com/tabs/#option-active
To get active tab index you can try below code:
var active = $( ".accordion" ).tabs( "option", "active" );
Also remember index starts with 0
I am working with bootstrap and attempting to create a button in tab 1 which "activates" (switches to) tab 2.
Here's my code:
HTML navigation tabs:
<ul id="pageSwitcher" class="nav nav-tabs" style="width:100%;">
<li>Page One</li>
<li>Page Two</li>
</ul>
HTML tab content:
<div class="tab-content" style="width:100%;">
<div class="tab-pane active" id="page1">
<button type="button" onclick="showPageTwo();">Proceed to page 2</button>
</div>
<div class="tab-pane" id="page2">
<p>Page 2 content here!</p>
</div>
</div>
JavaScript:
<script type="text/javascript">
$(document).ready(function() {
$('#myTab a').click(function (e) {
e.preventDefault();
$(this).tab('show');
}
});
function showPageTwo() {
$('#pageSwitcher li:eq(1) a').tab('show');
}
</script>
Anyone willing to provide some insight as to where exactly I'm going wrong? I've copied several examples almost exactly... clicking on the tabs themselves works fine, I just can't seem to make a button at the bottom of page 1 that activates page 2.
One: bad form, inline onclick call... you don't need it, get rid of it:
<button type="button">Proceed to page 2</button>
Two: you have two JS errors. You didn't close your .click() function, and you're trying to trigger the first tab with the specifier of li:eq(0)...
$(document).ready(function() {
$('#myTab a').click(function (e) {
e.preventDefault();
$(this).tab('show');
// ALSO, you were missing a closing paren, here!
});
//two issues ... onclick inside your button is trying to access
// your function before it's available... inline js like that, bad idea anyhow
// so hook into it inside your DOM ready code here anyhow.
var showPageTwo = function() {
// secondly, you're looking at the wrong item!
// li:eq(0) means "look at the first li in the array of li"
$('#pageSwitcher li:eq(1) a').tab('show');
};
$(".tab-content").on("click","#page1 button", showPageTwo);
});
See this jsFiddle for a working example: http://jsfiddle.net/mori57/Xr9eT/
Give your button an ID :
<div class="tab-content" style="width:100%;">
<div class="tab-pane active" id="page1">
<button type="button" id="myButton">Proceed to page 2</button>
</div>
<div class="tab-pane" id="page2">
<p>Page 2 content here!</p>
</div>
</div>
and just trigger a click on the right anchor, bootstrap does the rest :
$(document).ready(function() {
$('#myTab a').on('click', function(e) {
e.preventDefault();
$(this).tab('show');
});
$('#myButton').on('click', function() {
$('.nav-tabs li:eq(1) a').trigger('click');
});
});
You should not use specific code for your button, but generic event-driven process:
- you should add an attribute to your button to specify towards which page it will redirect
- then attach a click event
- attach click event to tabs to do the same
HTML:
<button type="button" id="btn" gotoPage="#page2">Proceed to page 2</button>
JS to process tab switching:
function showPage(pageId){
$('.tab-pane').each(function(){
$(this).removeClass('active');
$(this).hide();
});
$(pageId).show();
$(pageId).addClass('active');
}
(Not sure you need to use show or hide functions if you CSS manages thats thanks to active class)
Then for your button:
$('#btn').click(function(){
var destPage = $(this).attr('gotoPage');
showPage(destPage);
});
For tabs:
$('#pageSwitcher a').each(function(){
$(this).click(function(e){
showPage($(this).attr('href'));
});
});
And you can load page one at startup, if needed:
$(document).ready(function(){
showPage("#page1"); // default: load page 1
});
Example: http://jsfiddle.net/DSbrj/1/
showPageTwo() should be declared outside of the document.ready() call.
I have one form located on several Twitter's Bootstrap tabs:
<form id="personal-data" class="form-horizontal">
<div class="tabbable">
<ul id="tab" class="nav nav-tabs">
<li class="active">Home</li>
<li class="">Profile</li>
<!-- ... -->
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade active in" id="home">
<fieldset>
<div class="control-group">
<div class="controls">
<input type="text" id="field1">
</div>
</div>
</fieldset>
</div>
<div class="tab-pane fade" id="profile">
<fieldset>
<div class="control-group">
<div class="controls">
<input type="text" id="field2">
</div>
</div>
</fieldset>
</div>
When I validate the form with jQuery validate on active tab and field with invalid value is on the same tab, then validation fails (which is correct). But when I am on one tab and invalid value is on another tab, then validation returns true, which is incorrect. How can I fix it? How can I highlight that field on another tab?
Please see this demo (just press button next - it will show error message, then go to last tab and press finish there).
I think your problem lies in the fact that validation occurs in visible elements only.
Reading this issue we see that on version 1.9
Fixed #189 - :hidden elements are now ignored by default
and a solution a few comments down
$.validator.setDefaults({
ignore: ""
});
My solution to enable tabs
...
highlight: function(label) {
$(label).closest('.control-group').addClass('error');
$(".tab-content").find("div.tab-pane:hidden:has(div.error)").each( function(){
var id = $(this).attr("id");
$('#tabs a[href="#'+id+'"]').tab('show');
});
},
...
Is necessary that you add this code to allow change tab by js
$('a[data-toggle="tab"]').on('shown', function (e) {
e.target // activated tab
e.relatedTarget // previous tab
});
thanks for your code it solved most of my problem, except the part to navigate to first tab with error. I got around as follows:
var IsValid = true;
// Validate Each Bootstrap tab
$(".tab-content").find("div.tab-pane").each(function (index, tab) {
var id = $(tab).attr("id");
$('a[href="#' + id + '"]').tab('show');
var IsTabValid = $("#SomeForm").valid();
if (!IsTabValid) {
IsValid = false;
}
});
// Show first tab with error
$(".tab-content").find("div.tab-pane").each(function (index, tab) {
var id = $(tab).attr("id");
$('a[href="#' + id + '"]').tab('show');
var IsTabValid = $("#SomeForm").valid();
if (!IsTabValid) {
return false; // Break each loop
}
});
Are these jQuery tabs you're using? You can deactivate all other tabs and gradually activate them while the submitted data on each form pass the validation. Disable them all but the first in your constructor and after each validation enable the next.
.tabs( "enable" , index )
Read more here.
You could also put one final validation method in the end and put all your content visible depending on the tabs so you can escape the reloading of the links.
Building upon #juanmanuele's answer, this is how I managed to get it working with Bootstrap 3 tabs:
if($(".tab-content").find("div.tab-pane.active:has(div.has-error)").length == 0)
{
$(".tab-content").find("div.tab-pane:hidden:has(div.has-error)").each(function(index, tab)
{
var id = $(tab).attr("id");
$('a[href="#' + id + '"]').tab('show');
});
}
To place focus on the 1st input with error:
$('a[data-toggle="tab"]').on('shown.bs.tab', function(e)
{
e.target // activated tab
$($(e.target).attr('href')).find("div.has-error :input:first").focus();
//e.relatedTarget // previous tab
});
Not exactly the solution for jQuery Validate, but you could use the "invalid" event on form elements, to catch HTML5 validation errors, and get the focused element, find the respectively tab-pane, and show it.
I have done this.
$("form").find("input, select").on("invalid", function() {
var id = $(this).parents(".tab-pane").attr("id");
$("#tabs-selector ul").find("li a[href='#" + id + "']").tab("show");
});
Hope this helps you. Again, this is for HTML5 or if jQuery Validate fires an invalid event.