p：日历在 p：tabView 中不起作用 [重复]答案

【问题标题】：p:calendar not working within p:tabView [duplicate]p：日历在 p：tabView 中不起作用 [重复]
【发布时间】：2015-12-03 07:13:03
【问题描述】：

我的页面上有 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>

【问题讨论】：

标签： javascript jsf primefaces calendar tabview

【解决方案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 有时“没有注意到”更改并坚持提供原始内容。

【讨论】：

我没有意识到将所有 primefaces 组件放在表单中是一种很好的形式。一个问题是我不能将 tabView 放在一个表单中，因为我有大量的表单（每个选项卡至少一个）。我使用表单来帮助划分我的 ajax 功能（仅处理和更新必要的表单）这是错误的吗？
从我的角度来看，最好将一页上的表单数量保持在尽可能低的水平。而且，如果您设法花一些时间重构流程/更新属性以仅使用在给定场景中需要触及的组件，您最终可能会显着减少网络流量（尽量避免使用那些通用的 @all 或 @(表单）选择器（如果可以） - 指定 ID 列表也可以完成这项工作）。
另外，如果我没记错的话，PF 选择器的正确形式是@(form)，而不是@form（注意括号）。此外，ID 只能用空格分隔，不能用逗号。

【解决方案2】：

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

【讨论】：