在JSF中将向导与JQuery一起使用

Question

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.

Answer 1

I can't spot any error in the code snippets you posted, so probably the error lies outside the snippet. Usually. these errors occur when there's something wrong with the JavaScript libraries. Please check

• if there's an error message in the error console of your browser's developer tools (F12 on Windows, CMD+ALT+I on OSX).
  • if jQuery is loaded more than once (from different folders, possible with different names or versions)
• if there's a problem with the timing (your wizard is initialized, but too early, or - if jQuery is loaded twice - before jQuery is initialized the second time).

Hope that helps!

BTW, the BootsFaces showcase shows how to use a BootsFaces <b:carousel> as a wizard. Maybe that's an interesting alternative.