0
У меня проблема с мастером формы, который я использую.Использование мастера с JQuery в JSF
Кажется, что все хорошо, пока я не использую теги JSF или, более конкретно, bootsfaces.
Вот мой волшебники 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 добавляют идентификаторы, которые необходимо использовать при ссылках, но я не уверен, если это проблема, и если да, любая помощь будет принята с благодарностью.
Так почему бы вам не добавить тег bootsfaces, если вы действительно подозреваете, что это вызвало проблему? И что такое волшебник? Заявив, что это может вызвать кого-то, кто знает об этом, чтобы помочь. Сейчас довольно сложно понять, что происходит – Kukeltje
Да, мои извинения за то, что я не уточнил. В основном это мастер формы со следующими и предыдущими кнопками, и проблема имеет какое-то отношение к загрузочным поверхностям, потому что я могу перемещаться с мастером с помощью кнопок при удалении компонентов bootsfaces. Я просто не могу понять, почему bootsfaces вызывает проблему, поэтому мой вопрос. –
Является ли это обычным мастером? Любое ведение журнала на консоли браузера, если вы попытаетесь перейти? Серверная сторона? Сетевое протоколирование – Kukeltje