p:calendar 不在 p:tabView 内工作

Question

我的页面上有 2 个 PrimeFaces 日历控件，位于 Tabview 内。我将一个定义为弹出窗口（默认模式），另一个定义为按钮。

相关的输入字段出现在页面上，它们具有来自我的 bean 的默认日期，但日历控件没有出现。我也试过 mode="inline" 但日历不显示。

<div class="ui-grid ui-grid-responsive">
  <div class="ui-grid-row">
    <div class="ui-grid-col-3">
      <p:panel>
        <h:form id="coursesListForm">
          <p:dataTable id="coursesList" value="#{manageClasses.courses}" var="course" rowKey="#{course.idAsString}" selectionMode="single" selection="#{manageClasses.selectedCourse}">
            <p:ajax event="rowSelect" process="@all" update="@form, tabView" />
            <p:column headerText="#{text['name']}">
              <h:outputText value="#{course.displayString}" />
            </p:column>
          </p:dataTable>
        </h:form>
      </p:panel>
    </div>
    <div class="ui-grid-col-9">
      <p:tabView id="tabView" activeIndex="#{manageClasses.tabIndex}" disabled="#{manageClasses.isTabViewDisabled}">
        <p:ajax event="tabChange" listener="#{manageClasses.onTabChange}" />
        <p:tab title="#{text['reports']}" id="reportTab">
          <h:form id="reportForm">
            <p:panelGrid columns="2">
              <p:outputLabel for="fromDateCalendar" value="#{text['Reports.from']}" />
              <p:calendar id="fromDateCalendar" value="#{reportRequest.fromDate}" showOn="button" />
              <p:outputLabel for="toDateCalendar" value="#{text['Reports.to']}" />
              <p:calendar id="toDateCalendar" value="#{reportRequest.toDate}" />
            </p:panelGrid>
          </h:form>
        </p:tab>
      </p:tabView>
    </div>
  </div>

Answer 1

尝试将所有 PrimeFace 组件放在 h:form 内 - 当前您有例如这个：

<p:panel>
    <h:form id="coursesListForm">
    ...some content...
    </h:form>
</p:panel>

虽然它看起来应该与此非常相似：

<h:form id="coursesListForm">
    <p:panel>
    ...some content...
    </p:panel>
</h:form>

第二个 h:form 也应该这样做 - 确保 <h:form id="reportForm"> 包含 <p:tabView id="tabView" 和所有相关内容。

您可能还需要在更改完成后重新部署，我的 JBoss 有时 "doesn't notice" 更改并坚持提供原始内容。

Answer 2

这是由声明了 jquery.js 库的菜单部分中不相关的 javascript 引起的。当我删除有问题的导入时，所有奇怪的 Primefaces 错误都消失了。似乎声明其他 jquery 库会干扰 Primefaces 代码。

p:calendar 不在 p:tabView 内工作

p:calendar not working within p:tabView

javascript

jsf

calendar

primefaces

tabview