skip to Main Content

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


  1. Chosen as BEST ANSWER

    RESOLVED: I have resolved removing click event and using

    onNext: function(tab, navigation, index) {
            if (index==1){
    

    So I use index to associate instructions to one tab


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

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search