8

I have a simple html form with nested jQuery steps.

The Main wizard has 5 steps and the 3rd step has a sub wizard containing 3 steps.

When clicked on "Next" of main wizard, step is moved and the content is displayed but after the 3rd step (the one with sub wizard) the tab moves to the 4rth but upon reaching 4rth step no content is displayed, if I disable the jQuery script that displays the sub wizard, the main 4rth step displays content.

I tried various forums and also started debugging jQuery Steps library for a while now but couldn't find 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>

4

1 回答 1

6

试试我根据@medievo 在这篇文章中建议的解决方案制作的这个JSfiddle 工作示例。

显然，问题在于一旦初始化和显示，onStepChange事件处理程序main-wizard就不再被调用。sub-wizard调试库后，我可能会提供其他信息。会及时更新。

关于解决方案：

假设我们有两个functions初始化main-wizard和sub-wizard使用jquery.steps库。

for 的函数main-wizard如下所示：

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();
        }
    });
};

请注意，onStepChanging处理程序使sub-wizard在第一次调用中被初始化和显示，并且只在下一次调用中显示。

另请注意，处理程序通过隐藏和显示onStepChanged来切换视图。previous-step viewnext-step view

for 的函数sub-wizard如下所示：

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();
    }
}

请注意，有一个语句通过询问它是否已经有添加的类if来识别是否已经初始化。如果它已经初始化，我们只需要它。sub-wizardwizardjquery.stepsshow()

另请注意，onFinished处理程序使main-wizard继续使用next-step.

希望这有助于解决您的问题。

编辑：

在检查和调试代码之后，问题是以下jQuery查询（来自库的第 1196 行）从所有内容中获取steps content，main-wizard并使sub-wizard转换（从包含子向导的步骤到下一步）在它们之间搞砸了。

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

通过以下更改该行可以解决此问题。但是，还有一些其他行需要类似的修复。

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

另请注意，有一个待批准的拉取请求正在等待批准，这显然解决了该问题。但是，恕我直言，该拉取请求直接更改了库中的构建文件，并且可能不会获得批准。

编辑2：

在此处创建拉取请求以解决有关嵌套 jquery.steps 向导的问题。

于 2015-09-09T20:30:00.147 回答