I have a problem with a form wizard I'm using.
It seems that everything is fine until I use JSF tags or more specifically, bootsfaces.
Here is my wizards HTML code and JQuery code:
<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>
And this is my 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();
}
The next and previous buttons only work if I remove any bootsfaces tags.
I have read that JSF components adds IDs which needs to be used when referencing but I'm not sure if this is the problem and if so, any help would be greatly appreciated.
