javascriptjquerysmart-wizard

JQuery SmartWizard - Step being shown, but not being enabled

I am using this Jquery plugin to create a Wizard like interface:

JQuery Bootstrap Smart Wizard

I have 5 steps in the wizard. Step 3 and Step 4 are hidden when the wizard first loads.

  1. When a user selects "Yes" Radio button in Step 2 and then clicks on "Next" button, it should show, enable and go to Step 4 in the Wizard.
  2. When a user selects "No" Radio button in Step 2 and then clicks on "Next" button, it should show, enable and go to Step 3 in the Wizard.

The problem I am facing is, the hidden steps are being shown, on demand, but are showing as disabled. As a result, when I click "Next" on Step 2, the hidden step is shown, but not enabled and thus skips to Step 5.

How do I fix it to achieve the desired behavior?

Here is my code for this:

<div id="smartwizard">
<ul>
    <li><a href="#step-1">Step 1<br /><small>Step 1</small></a></li>
    <li><a href="#step-2">Step 2<br /><small>Step 2</small></a></li>
    <li><a href="#step-3">Step 3<br /><small>Step 3</small></a></li>
    <li><a href="#step-4">Step 4<br /><small>Step 4</small></a></li>
    <li><a href="#step-5">Step 5<br /><small>Step 5</small></a></li>                
</ul>

<div>
    <div id="step-1" class="">
        This is the first step and it should be shown all the time.
    </div>
    <div id="step-2" class="">
        <div>Would you like to add more options?</div>
        <p>
        <input type="radio" name="yes_no" id="step2RadioYes" checked>&nbsp;Yes</input>
        </p>
        <p>
        <input type="radio" name="yes_no" id="step2RadioNo" >&nbsp;No</input>
        </p>
    </div>

    <div id="step-3" class="">
        This step is hidden on load, but should be shown and enabled if I select "No" in Step 2.
    </div>

    <div id="step-4" class="">
        This step is hidden on load, but should be shown and enabled if I select "Yes" in Step 2.
    </div>

    <div id="step-5" class="">
        This step is the final step.
    </div>
</div>


<script>
$('#smartwizard').smartWizard({
            selected: 0,
            theme: 'default',
            transitionEffect:'fade',
            showStepURLhash: false,
            contentCache: false,
            hiddenSteps: [2,3]
    });

$("#smartwizard").on("leaveStep", function(e, anchorObject, stepNumber, stepDirection, stepPosition) {
        if(stepNumber === 1){
           if(document.getElementById('step2RadioYes').checked) {

           // Enable and go to step-4 if Yes is selected
           $('#smartwizard').smartWizard("stepState", [2], "disable");
           $('#smartwizard').smartWizard("stepState", [2], "hide");

           $('#smartwizard').smartWizard("stepState", [3], "enable");
           $('#smartwizard').smartWizard("stepState", [3], "show");
          }
          else if(document.getElementById('step2RadioNo').checked) {

           // Enable and go to step-4 if No is selected
           $('#smartwizard').smartWizard("stepState", [2], "enable");
           $('#smartwizard').smartWizard("stepState", [2], "show");

           $('#smartwizard').smartWizard("stepState", [3], "disable");
           $('#smartwizard').smartWizard("stepState", [3], "hide");
          }
       }
    });    
</script>
Solution

  • The leaveStep event doesn't offer the possibility to reset the next/prev step. I may suggest a workaround:

     setTimeout(function() {
    $('#smartwizard').data('smartWizard')._showStep(3); // go to step 3....
 }, 50);


    $('#smartwizard').smartWizard({
    selected: 0,
    theme: 'default',
    transitionEffect: 'fade',
    showStepURLhash: false,
    contentCache: false,
    hiddenSteps: [2, 3]
});

$("#smartwizard").on("leaveStep", function (e, anchorObject, stepNumber, stepDirection) {
    $("#smartwizard").data('nextStep', stepNumber + 1);
    if (stepNumber === 1) {
        if (document.getElementById('step2RadioYes').checked) {

            // Enable and go to step-4 if Yes is selected
            $('#smartwizard').smartWizard("stepState", [2], "disable");
            $('#smartwizard').smartWizard("stepState", [2], "hide");

            $('#smartwizard').smartWizard("stepState", [3], "enable");
            $('#smartwizard').smartWizard("stepState", [3], "show");

            setTimeout(function() {
                $('#smartwizard').data('smartWizard')._showStep(3);
            }, 50);

        } else {

            // Enable and go to step-4 if No is selected
            $('#smartwizard').smartWizard("stepState", [2], "enable");
            $('#smartwizard').smartWizard("stepState", [2], "show");

            $('#smartwizard').smartWizard("stepState", [3], "disable");
            $('#smartwizard').smartWizard("stepState", [3], "hide");

            setTimeout(function() {
                $('#smartwizard').data('smartWizard')._showStep(2);
            }, 50);
        }
    }
});
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://rawgit.com/techlab/SmartWizard/master/dist/css/smart_wizard.min.css">
<script src="https://rawgit.com/techlab/SmartWizard/master/dist/js/jquery.smartWizard.js"></script>

<div id="smartwizard">
    <ul>
        <li><a href="#step-1">Step 1<br/>
            <small>Step 1</small>
        </a></li>
        <li><a href="#step-2">Step 2<br/>
            <small>Step 2</small>
        </a></li>
        <li><a href="#step-3">Step 3<br/>
            <small>Step 3</small>
        </a></li>
        <li><a href="#step-4">Step 4<br/>
            <small>Step 4</small>
        </a></li>
        <li><a href="#step-5">Step 5<br/>
            <small>Step 5</small>
        </a></li>
    </ul>

    <div>
        <div id="step-1" class="">
            This is the first step and it should be shown all the time.
        </div>
        <div id="step-2" class="">
            <div>Would you like to add more options?</div>
            <p>
                <input type="radio" name="yes_no" id="step2RadioYes" checked>&nbsp;Yes</input>
            </p>

            <p>
                <input type="radio" name="yes_no" id="step2RadioNo">&nbsp;No</input>
            </p>
        </div>

        <div id="step-3" class="">
            This step is hidden on load, but should be shown and enabled if I select "No" in Step 2.
        </div>

        <div id="step-4" class="">
            This step is hidden on load, but should be shown and enabled if I select "Yes" in Step 2.
        </div>

        <div id="step-5" class="">
            This step is the final step.
        </div>
    </div>
</div>

    A different approach without the setTimeout can be based on remapping the internal methods _showNext / _showPrevious. Perahps it solves the issue but it is also a strong change............

    $('#smartwizard').smartWizard({
    selected: 0,
    theme: 'default',
    transitionEffect: 'fade',
    showStepURLhash: false,
    contentCache: false,
    hiddenSteps: [2, 3]
});

function changeDirection(obj, newIdx) {
    if (document.getElementById('step2RadioYes').checked) {
        // Enable and go to step-4 if Yes is selected
        $('#smartwizard').smartWizard("stepState", [2], "disable");
        $('#smartwizard').smartWizard("stepState", [2], "hide");

        $('#smartwizard').smartWizard("stepState", [3], "enable");
        $('#smartwizard').smartWizard("stepState", [3], "show");

        obj._loadStepContent(newIdx);
    } else {
        // Enable and go to step-4 if No is selected
        $('#smartwizard').smartWizard("stepState", [2], "enable");
        $('#smartwizard').smartWizard("stepState", [2], "show");

        $('#smartwizard').smartWizard("stepState", [3], "disable");
        $('#smartwizard').smartWizard("stepState", [3], "hide");

        obj._loadStepContent(newIdx);
    }
}

$("#smartwizard").data('smartWizard')._showNext_orig = $("#smartwizard").data('smartWizard')._showNext;
$("#smartwizard").data('smartWizard')._showNext = function () {
    if (this.current_index === 1) {
        changeDirection(this, 3);
    } else {
        $("#smartwizard").data('smartWizard')._showNext_orig();
    }
    return true;
}
$("#smartwizard").data('smartWizard')._showPrevious_orig = $("#smartwizard").data('smartWizard')._showPrevious;
$("#smartwizard").data('smartWizard')._showPrevious = function () {
    if (this.current_index === 3) {
        changeDirection(this, 1);
    } else {
        $("#smartwizard").data('smartWizard')._showPrevious_orig();
    }
    return true;
}
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://rawgit.com/techlab/SmartWizard/master/dist/css/smart_wizard.min.css">
<script src="https://rawgit.com/techlab/SmartWizard/master/dist/js/jquery.smartWizard.js"></script>

<div id="smartwizard">
    <ul>
        <li><a href="#step-1">Step 1<br/>
            <small>Step 1</small>
        </a></li>
        <li><a href="#step-2">Step 2<br/>
            <small>Step 2</small>
        </a></li>
        <li><a href="#step-3">Step 3<br/>
            <small>Step 3</small>
        </a></li>
        <li><a href="#step-4">Step 4<br/>
            <small>Step 4</small>
        </a></li>
        <li><a href="#step-5">Step 5<br/>
            <small>Step 5</small>
        </a></li>
    </ul>

    <div>
        <div id="step-1" class="">
            This is the first step and it should be shown all the time.
        </div>
        <div id="step-2" class="">
            <div>Would you like to add more options?</div>
            <p>
                <input type="radio" name="yes_no" id="step2RadioYes" checked>&nbsp;Yes</input>
            </p>

            <p>
                <input type="radio" name="yes_no" id="step2RadioNo">&nbsp;No</input>
            </p>
        </div>

        <div id="step-3" class="">
            This step is hidden on load, but should be shown and enabled if I select "No" in Step 2.
        </div>

        <div id="step-4" class="">
            This step is hidden on load, but should be shown and enabled if I select "Yes" in Step 2.
        </div>

        <div id="step-5" class="">
            This step is the final step.
        </div>
    </div>
</div>