I’m using twitter bootstrap wizard to create one wizard with four tab.
I need to associate an action on next button click, for example in the first tab I have a table where the user select one row, so I have disabled the next button and enabled when one row is selected. The problem is with the next tab because the id of the next button is the same for all tab so I can’t associate an action different for every tab. Could you suggest me one solution?
Thanks, this is my javascript code:
$(document).ready(function() {
$('#acquisitionWizard').bootstrapWizard({onTabShow: function(tab, navigation, index) {
// Dynamically change percentage completion on progress bar
var tabCount = navigation.find('li').length;
var current = index+1;
var percentDone = (current/tabCount) * 100;
$('#acquisitionWizard').find('#progressBar').css({width:percentDone+'%'});
// Optional: Show Done button when on last tab;
// It is invisible by default.
$('#acquisitionWizard').find('.last').toggle(current >= tabCount);
// Optional: Hide Next button if on last tab;
// otherwise it shows but is disabled
$('#acquisitionWizard').find('.next').toggle(current < tabCount);
$("#next").addClass("disabled");
}});
$(function() {
$("#next").click(
function() {
...
2
Answers
RESOLVED: I have resolved removing click event and using
So I use index to associate instructions to one tab
I did the same thing using Knockout.js, binding the current step to a view model property and executing different actions based on its value.