I am building a "check-out" like interaction with jQuery UI tabs. This means that the click of a button on the first tab will deactivate the first tab and move to the next. I have been combing through the posts on Stack Overflow but nothing I try seems to work. I am using jQuery UI 1.8, here is the code:
$(document).ready(function() {
var $tabs = $('#tabs').tabs({ selected: 0 });
$tabs.tabs('option', 'selected', 0);
$("#tabs").tabs({disabled: [1,2]});
$("#addstudent").click(function(){
$tabs.tabs('option', 'selected', 1);
$("#tabs").tabs({disabled: [0,2]});
});
$("#confirm").click(function(){
$tabs.tabs('option', 'selected', 2);
$("#tabs").tabs({disabled: [0,1]});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.8.24/jquery-ui.min.js"></script>
<div id="tabs">
<ul>
<li><a href="#fragment-1">Student Information</a></li>
<li><a href="#fragment-2">Confirmation</a></li>
<li><a href="#fragment-3">Invoice</a></li>
</ul>
<div id="fragment-1">
<button id="addstudent" >Add Student</button>
</div>
<div id="fragment-2">
<button id="confirm" >Confirm</button>
</div>
<div id="fragment-3">
tab 3, index 2
</div>
</div>
When I click the buttons, the next tab becomes unlocked (in that it is selectable) but it does not disable the tab at index 0 and switch to the tab at index 1. Also, the corresponding panel does not show.
jQuery is one of the longest-running and most influential JavaScript libraries on the web. A staggering 78% of the top 1 million websites use jQuery in some way, according to BuiltWith. As for the most talked-about JavaScript library today, React, it's used by a relatively paltry 14%.
JqueryUI is a powerful Javascript library built on top of jQuery JavaScript library. UI stands for User interface, It is a set of plug-ins for jQuery that adds new functionalities to the jQuery core library.
For jQuery UI 1.9+, the select method has been deprecated in the API. In 1.9+, you need to use option
and active
, instead.
From the documentation:
Old API:
// Activate the third tab (in a zero-based index) $( "#tabs" ).tabs( "select", 2 );
New API:
// Activate the third tab (in a zero-based index) $( "#tabs" ).tabs( "option", "active", 2 );
Try changing your code to this:
var $tabs = $('#tabs').tabs({ selected: 0, disabled: [1,2] });
$("#addstudent").click(function(){
$tabs.tabs('enable', 1).tabs('select', 1).tabs('disable', 0);
});
$("#confirm").click(function(){
$tabs.tabs('enable', 2).tabs('select', 2).tabs('disable', 1);
});
JSBin Example
@Aaron Sherman already answered your question. Here is the detailed step.
Here is JS part of the code:
$(document) .ready(function() {
$("#tabs").tabs();
$(".btnNext").click(function () {
$( "#tabs" ).tabs( "option", "active", $("#tabs").tabs('option', 'active')+1 );
});
$(".btnPrev").click(function () {
$( "#tabs" ).tabs( "option", "active", $("#tabs").tabs('option', 'active')-1 );
});
});
Here are the "a href" tags to be added in your tabs div
Example:
<div id="tabs-1">
<a class="myButton btnNext" style="color:white;">Next Tab</a>
</div>
<div id="tabs-2">
<a class="myButton btnPrev" style="color:white;">Previous Tab</a>
<a class="myButton btnNext" style="color:white;">Next Tab</a>
</div>
<div id="tabs-3">
<a class="myButton btnPrev" style="color:white;">Previous Tab</a>
</div>
$(function() {
$( "#tabs" ).tabs({ activate: function(event ,ui){
//console.log(event);
//alert( ui.newTab.index());
//alert( ui.newTab.attr('li',"innerHTML")[0].getElementsByTagName("a")[0].innerHTML);
alert( ui.newTab[0].getElementsByTagName("a")[0].innerHTML);
//alert( this.text);
} });
});
I modified solution of @Mahesh Vemuri adding possibility to disable steps following the first and then enable them after clicking "NEXT" button:
JScode:
$(document) .ready(function() {
$("#tabs").tabs();
$("#tabs").tabs( "option", "disabled", [ 1, 2 ] );
$(".btnNext").click(function () {
$("#tabs").tabs( "enable", $("#tabs").tabs('option', 'active')+1 );
$("#tabs").tabs( "option", "active", $("#tabs").tabs('option', 'active')+1 );
});
$(".btnPrev").click(function () {
$("#tabs").tabs( "option", "active", $("#tabs").tabs('option', 'active')-1 );
});
});
The HTML is the same.
P.S.: Note that with this code, clicking NEXT button will enable next tab (previously disabled) but clicking PREV button will not disable current tab, in order to allow user to go backward and forward into a sequential flow until next disabled tab.
Hopefully, if Tabs contain 3 steps of a form, action of NEXT button could be fired only if a JS Form Validation will have success.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With