I have a form with multiple Smart Wizards using incrementing UIDs for each. I want to restart the wizard to Step 1 when clicking the form Back or Reset buttons (external from the wizards). Step reset is only happening on the first instance of the Smart Wizard. I tried updating my JS to include all IDs which contain "smartwizard", but it is still only targeting the first one.
On the latest v5 multiple demo, the same / similar behavior can be viewed when advancing steps on both wizards and clicking cancel on the second one, triggering reset only on the first wizard.
Am I missing something with how and where the event handling is happening on the "reset" key in the Smart Wizard code (please see source links for reference)? I need guidance from this point, so any insight is appreciated...
jQuery / JS File
//FUNCTIONS FOR THE FORM BUTTONS
$('#back-button').on('click', function(event) {
$('[id*="smartwizard"]').smartWizard('reset');
});
$('#reset-button').on('click', function(event) { // Reset form to initial state
$('[id*="smartwizard"]').smartWizard('reset');
});
SmartWizard
key: "reset",
value: function reset() {
// Reset all
this._setURLHash('#');
this._initOptions();
this._initLoad();
}
HTML File
//FORM SNIPPET
<ul>
<li class="process" id="process1">
<div id="smartwizard">
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="#step-1">
<strong>Step 1</strong> <h4>Introduction</h4>
</a>
</li>
</ul>
<div class="tab-content">
<div id="step-1" class="tab-pane" role="tabpanel" aria-labelledby="step-1">
<h3>Step 1 Content</h3>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div id="step-2" class="tab-pane" role="tabpanel" aria-labelledby="step-2">
<h3>Step 2 Content</h3>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
</div>
</div>
</li>
</ul>
<ul>
<li class="process" id="process2">
<div id="smartwizard2">
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="#step-1">
<strong>Step 1</strong> <h4>Introduction</h4>
</a>
</li>
</ul>
<div class="tab-content">
<div id="step-1" class="tab-pane" role="tabpanel" aria-labelledby="step-1">
<h3>Step 1 Content</h3>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div id="step-2" class="tab-pane" role="tabpanel" aria-labelledby="step-2">
<h3>Step 2 Content</h3>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
</div>
</div>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div class="buttons">
<button id="back-button" type="button">BACK</button>
<button id="reset-button" type="reset">RESET</button>
</div>
Luckily, I found some inspiration for how to iterate through all of the Smart Wizards using .each() with an array of the IDs.
I still believe the code could be refactored for simplicity to encompass all IDs containing "smartwizard", but this solved my issue with both external buttons and I only need to maintain the array values in one place as more Smart Wizards are added to the page.
var wizard = ["smartwizard", "smartwizard2"];
$('#back-button').on('click', function(event) { // Undo last selection and reset steps
$.each(wizard, function(i, val) {
$("#" + val).smartWizard('reset');
});
});
$('#reset-button').on('click', function(event) { // Reset steps to initial state
$.each(wizard, function( i, val ) {
$("#" + val).smartWizard('reset');
});
});