ネストされたjQueryステップを持つ単純なhtmlフォームがあります。
メイン ウィザードには 5 つのステップがあり、3 番目のステップには 3 つのステップを含むサブ ウィザードがあります。
メイン ウィザードの [次へ] をクリックすると、ステップが移動してコンテンツが表示されますが、3 番目のステップ (サブ ウィザードのあるもの) の後、タブは 4 番目に移動しますが、4 番目のステップに到達するとコンテンツが表示されません。サブ ウィザードを表示する jQuery スクリプト。メインの 4 番目のステップでコンテンツが表示されます。
さまざまなフォーラムを試し、しばらくの間 jQuery Steps ライブラリのデバッグも開始しましたが、理由がわかりませんでした。
どんな助けでも大歓迎です。
これも実行可能なコードです。
$("#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>