0
私が使用しているフォームウィザードに問題があります。JSFでJQueryでウィザードを使用する
JSFタグを使用するか、より具体的には、ブート・フェイスを使用するまでは問題ありません。ここで
は私のウィザードHTMLコードとjQueryコードです：
<div class="row">
<section>
<div class="wizard">
<div class="wizard-inner">
<div class="connecting-line"></div>
<ul class="nav nav-tabs" role="tablist" id="tabs">
<li role="presentation" class="active">
<a href="#step1" data-toggle="tab" aria-controls="step1" role="tab" title="" data-original-title="Step 1">
<span class="round-tab">
<i class="glyphicon glyphicon-user"></i>
</span>
</a>
</li>
<li role="presentation" class="disabled">
<a href="#step2" data-toggle="tab" aria-controls="step2" role="tab" title="" data-original-title="Step 2">
<span class="round-tab">
<i class="glyphicon glyphicon-pencil"></i>
</span>
</a>
</li>
<li role="presentation" class="disabled">
<a href="#step3" data-toggle="tab" aria-controls="step3" role="tab" title="" data-original-title="Step 3">
<span class="round-tab">
<i class="glyphicon glyphicon-picture"></i>
</span>
</a>
</li>
<li role="presentation" class="disabled">
<a href="#complete" data-toggle="tab" aria-controls="complete" role="tab" title="" data-original-title="Complete">
<span class="round-tab">
<i class="glyphicon glyphicon-ok"></i>
</span>
</a>
</li>
</ul>
</div>
<form role="form">
<p:growl id="growl" class="growlBack" autoUpdate="true" sticky="true"></p:growl>
<div class="tab-content">
<div class="tab-pane active" role="tabpanel" id="step1">
<h3>Basic Information</h3>
<hr/>
<div class="row">
<div class="col-md-6">
<label>Username</label>
<b:inputText type="text" class="form-control" id="userNameInput" placeholder="Username" required="true"/>
</div>
<div class="col-md-6">
<label>Title</label>
<b:selectOneMenu id="wizTitleList" required="true">
<f:selectItem itemLabel="- Select Title -" itemValue="0" />
<f:selectItems value="#{PopulateFields.titleCodes}" />
</b:selectOneMenu>
</div>
</div>
<div class="row">
<div class="col-md-6">
<label>First Name</label>
<b:inputText type="text" class="form-control" id="firstNameInput" placeholder="First Name" required="true"/>
</div>
<div class="col-md-6">
<label>Last Name</label>
<b:inputText type="text" class="form-control" id="lastNameInput" placeholder="Last Name" required="true"/>
</div>
</div>
<div class="row">
<div class="col-md-6">
<label>Previous Last Name</label>
<b:inputText type="text" class="form-control" id="previousLastNameInput" placeholder="Previous Last Name" required="true"/>
</div>
<div class="col-md-6">
<label>Birth Date</label>
<b:inputText type="date" class="form-control" id="birthDateInput" placeholder="Birth Date" required="true"/>
</div>
<div class="col-md-6">
<label>Gender</label>
<b:selectOneMenu id="wizGenderList" required="true">
<f:selectItem itemLabel="- Select Gender -" itemValue="0" />
<f:selectItems value="#{PopulateFields.genders}" />
</b:selectOneMenu>
</div>
<div class="col-md-6">
<label>ID Type</label>
<b:selectOneMenu id="wizIDTypesList" required="true">
<f:selectItem itemLabel="- Select ID Type -" itemValue="0" />
<f:selectItems value="#{PopulateFields.idTypes}" />
</b:selectOneMenu>
</div>
<div class="col-md-6">
<label>ID Number</label>
<b:inputText type="text" class="form-control" id="idNumberInput" placeholder="ID " required="true"/>
</div>
</div>
<hr/>
<ul class="list-inline pull-right">
<li><b:button class="btn btn-primary next-step" value="Save and continue"></b:button></li>
</ul>
</div>
<div class="tab-pane" role="tabpanel" id="step2">
<h3>Step 2</h3>
<p>This is step 2</p>
<ul class="list-inline pull-right">
<li><button type="button" class="btn btn-default prev-step">Previous</button></li>
<li><button type="button" class="btn btn-primary next-step">Save and continue</button></li>
</ul>
</div>
<div class="tab-pane" role="tabpanel" id="step3">
<h3>Step 3</h3>
<p>This is step 3</p>
<ul class="list-inline pull-right">
<li><button type="button" class="btn btn-default prev-step">Previous</button></li>
<li><button type="button" class="btn btn-default next-step">Skip</button></li>
<li><button type="button" class="btn btn-primary btn-info-full next-step">Save and continue</button></li>
</ul>
</div>
<div class="tab-pane" role="tabpanel" id="complete">
<h3>Complete</h3>
<p>You have successfully completed all steps.</p>
</div>
<div class="clearfix"></div>
</div>
</form>
</div>
</section>
</div>
そして、これは私のjQueryのです：
$(document).ready(function() {
//Initialize tooltips
$('.nav-tabs > li a[title]').tooltip();
//Wizard
$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
var $target = $(e.target);
if ($target.parent().hasClass('disabled')) {
return false;
}
});
$(".next-step").click(function (e) {
var $active = $('.wizard .nav-tabs li.active');
$active.next().removeClass('disabled');
nextTab($active);
});
$(".prev-step").click(function (e) {
var $active = $('.wizard .nav-tabs li.active');
prevTab($active);
});
});
function nextTab(elem) {
$(elem).next().find('a[data-toggle="tab"]').click();
}
function prevTab(elem) {
$(elem).prev().find('a[data-toggle="tab"]').click();
}
次と前のボタン私はどんなbootsfacesタグを削除した場合にのみ機能します。
私はJSFコンポーネントが参照時に使用する必要があるIDを追加することをお読みになりましたが、これが問題であるかどうかわからない場合は、どんな助けでも大歓迎です。
実際に問題が発生すると思われる場合は、bootsfacesタグを追加してください。そして、ウィザードは何ですか？それは、それについての知識を持っている人を助けようとするでしょう。今何が起こっているのか分かりにくいです。 – Kukeltje
はい、私はより明確に指定しなかったことを謝罪します。これは、基本的に次のボタンと前のボタンを持つフォームウィザードです。この問題は、ブートサーフェスのコンポーネントを削除するときにボタンを使用してウィザードをナビゲートすることができるため、ブートサーフェスと関係します。私はちょうどbootsfacesが問題を引き起こしている理由を知ることができないので、私の質問です。 –
カスタムウィザードですか？ナビゲートしようとすると、ブラウザコンソールにログが記録されますか？サーバ側？ネットワークログ – Kukeltje