JQuery nested steps - nothing is displayed on the main page

Question

I have a simple html form with jQuery nested steps.

The main wizard has 5 steps, and the third step has an auxiliary wizard containing 3 steps.

When you click “Next” of the main wizard, the step moves and the content is displayed, but after the third step (the one that has the auxiliary wizard), the tab moves to the 4th, but after reaching the 4th step, the content does not appear if I turn off the jQuery script that the auxiliary wizard displays, the main 4th step displays the contents.

I tried various forums, and also started debugging the jQuery Steps library for a while, but couldn't figure out the reason.

Any help is appreciated.

Here is the code, which is also executable.

$("#frmMainWizard").steps({ headerTag: "h3", bodyTag: "section", transitionEffect: "slide", // "fade", stepsOrientation: "vertical" //enableAllSteps: true, //enablePagination: false, }); var childForms = $(".frmWizardSteps"); $.each(childForms, function() { console.log(this.id); var currentSubStesId = '#' + this.id; $(currentSubStesId).steps({ headerTag: "h4", bodyTag: "div", transitionEffect: "slideLeft", stepsOrientation: "vertical" //autoFocus: true, //enableAllSteps: true, //enablePagination: false }); }); $('#btnPrev').click(function() { $("#frmMainWizard").steps('previous'); }); $('#btnNext').click(function() { $("#frmMainWizard").steps('next'); }); 

 /* Wizard styles - override jquery steps */ .wizard.clearfix > .content.clearfix { overflow: auto !important; } /* .frmMainWizard { border-style: solid; border-color: blue; border-width: 5px; overflow:auto !important; } */ /* .frmWizardSteps { border-style: solid; border-color: red; border-width: 5px; overflow:auto !important; } */ .frmWizardSteps.wizard, .frmWizardSteps.tabcontrol { width: 95% !important; } .frmWizardSteps.wizard > .steps a, .frmWizardSteps.wizard > .steps a:hover, .frmWizardSteps.wizard > .steps a:active { padding: 0.5em 0.5em !important; } .frmWizardSteps .content { /*position: relative !important;*/ min-height: 20em !important; } .frmWizardSteps > .actions > ul { display: inline-block; text-align: right; } 

 <link href="https://godwin.azurewebsites.net/content/jquery.steps.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://godwin.azurewebsites.net/Scripts/jquery.steps.js"></script> <div id="frmMainWizard"> <h3>Pre prerequisites</h3> <section> <input id="aak_0" name="aak_0" type="checkbox" value="true" /> <label>Agent Acknowledgement</label> <textarea class="form-control" cols="20" id="hm_0" name="hm_0" rows="5" style="min-width: 350px; width:auto;">Help material for Pre prerequisites</textarea> <br /> <input id="sc_0" name="sc_0" type="checkbox" value="true" /> <label>Completed this step</label> <br /> </section> <h3>Prerequisites</h3> <section> <input id="aak_1" name="aak_1" type="checkbox" value="true" /> <label>Agent Acknowledgement</label> <textarea class="form-control" cols="20" id="hm_1" name="hm_1" rows="5" style="min-width: 350px; width:auto;">Help material for prerequisites</textarea> <br /> <input id="sc_1" name="sc_1" type="checkbox" value="true" /> <label>Completed this step</label> <br /> </section> <h3>Actual work</h3> <section> <br /> <input id="aak_2" name="aak_2" type="checkbox" value="true" /> <label>Agent Acknowledgement</label> <textarea class="form-control" cols="20" id="hm_2" name="hm_2" rows="5" style="min-width: 350px; width:auto;">Help material for Actual work</textarea> <br /> <br /> <div class="frmWizardSteps" id="frmWizardStep_c7514cd1-bf01-4adb-ba2a-4cd546bfc0a1"> <h4>Pre work</h4> <div> <br /> <br /> <textarea class="form-control" cols="20" id="hm_2_0" name="hm_2_0" rows="5" style="min-width: 350px; width:auto;">Help for Pre work</textarea> <br /> </div> <h4>Current work</h4> <div> <textarea class="form-control" cols="20" id="hm_2_1" name="hm_2_1" rows="5" style="min-width: 350px; width:auto;">Help for Current work</textarea> <br /> </div> <h4>Post work</h4> <div> <textarea class="form-control" cols="20" id="hm_2_2" name="hm_2_2" rows="5" style="min-width: 350px; width:auto;">Help for Post work</textarea> <br /> </div> </div> </section> <h3>Post actions</h3> <section> <input id="aak_3" name="aak_3" type="checkbox" value="true" /> <label>Agent Acknowledgement</label> <textarea class="form-control" cols="20" id="hm_3" name="hm_3" rows="5" style="min-width: 350px; width:auto;">Help material for Post actions</textarea> <br /> <input id="sc_2_3" name="sc_2_3" type="checkbox" value="true" /> <label>Completed this step</label> <br /> </section> <h3>Post post actions</h3> <section> <input id="aak_4" name="aak_4" type="checkbox" value="true" /> <label>Agent Acknowledgement</label> <textarea class="form-control" cols="20" id="hm_4" name="hm_4" rows="5" style="min-width: 350px; width:auto;">Help material for Post post actions</textarea> <br /> <input id="sc_3" name="sc_3" type="checkbox" value="true" /> <label>Completed this step</label> <br /> </section> </div> <div> <button id="btnPrev">MainPrev</button> <button id="btnNext">MainNext</button> </div> 

Answer 1

Try this working JSfiddle example , which I made based on the solution suggested by @medievo in this post .

Apparently, the problem is that somehow the onStepChange event onStepChange for the main-wizard no longer called as soon as the sub-wizard initialized and displayed. I can provide additional information after debugging the library. Will keep you posted.

About the solution:

Let's say that we have two functions that initialize main-wizard and sub-wizard using the jquery.steps library.

The function for the main-wizard as follows:

 var shoMainWizard = function(){ $("#main-wizard").steps({ /* All your jquery.steps config stuff here plus the following event handlers */ onStepChanging: function (event, currStepIndex, nextStepIndex) { // If we are moving on the step which contains the sub-wizard (index 2) if (nextStepIndex == 2){ shoSubWizard(currStepIndex, nextStepIndex); } return true; }, onStepChanged: function (event, currStepIndex, priorStepIndex) { $("#main-wizard-p-" + priorStepIndex).hide(); $("#main-wizard-p-" + currStepIndex).fadeIn(); } }); }; 

Note that the onStepChanging handler forces the sub-wizard initialized and displayed in the first call and simply displayed in the next calls.

Note that the onStepChanged handler switches the view by placing the previous-step view and displaying the next-step view .

The function for the sub-wizard as follows:

 var shoSubWizard = function(currStepIndex, nextStepIndex){ // if sub-wizard note rendered yet if (!$('#sub-wizard').hasClass('wizard')){ /* All your jquery.steps config stuff here plus the following event handlers */ onFinished: function() { $("#main-wizard").steps("next"); } }); } // otherwise, display sub-wizard with last changes else { $("#main-wizard-p-" + currStepIndex).hide(); $("#main-wizard-p-" + nextStepIndex).fadeIn(); } } 

Note that there is an if to determine if the sub-wizard has already been initialized or not, asking if there is already a wizard class that adds jquery.steps . If it has already been initialized, we just need to show() it.

Note that the onFinished handler makes main-wizard continuation of next-step .

Hope this helps solve your problem.

EDIT:

After viewing and debugging the code, the problem is that the next jQuery query (line # 1196 from the library) gets all steps content from the main-wizard and sub-wizard and makes the transition (from the step that contains the submaster to the next step) so that they mixed up.

 var stepContents = wizard.find(".content > .body") 

Changing this line as follows fixes the problem. However, there are other lines that need a similar fix.

 var stepContents = wizard.find("> .content > .body") 

Note also that there is a pull request that is awaiting confirmation, which seems to fix the problem. However, IMHO, this extraction request directly changes the embedded file from the library, and it probably won’t get approval.

EDIT 2:

The Pull request was created here to fix the problem with nested jquery.steps wizards.