p:calendar not working within p:tabView

Question

I have 2 PrimeFaces calendar controls on my page, inside a Tabview. I have one defined as a popup (default mode) and the other as a button.

The related entry fields appear on the page, and they have the default dates from my bean, but the calendar controls do not appear. I also tried mode="inline" but the calendar doesn't show.

<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>

score 0 · Answer 1 · answered Sep 10 '15 at 19:21

0

Try to put all the PrimeFace components within h:form - currently you have for example this:

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

While it should look rather similar to this:

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

The same should be done with the second h:form - make sure the <h:form id="reportForm"> contains <p:tabView id="tabView" and all the relevant content.

You may also need to redeploy after the changes are done, my JBoss sometimes "doesn't notice" the changes and insists on serving the original content.

answered Sep 10 '15 at 19:21

Sva.Mu

1,141
1
14
24

I didn''t realize it was good form to put all primefaces components within forms. One problem is that I can't put the tabView within a form, as I have a large number of forms on it (at least one per tab). I use forms to help divide up my ajax functionality (processing and updating only the necessary forms) Is this wrong? – Ramesh Sep 11 '15 at 08:50
From my point of view it is always better to keep the number of forms on one page as low as possible. And if you manage to spend some time refactoring the process/update attributes to only work with the components that need to be touched for the given scenarios, you may end up having significantly reduced network traffic (try to avoid those generic @all or @(form) selectors if you can - specifying list of IDs will do the job as well). – Sva.Mu Sep 11 '15 at 14:32
Also, if I'm not mistaken, the correct form of the PF selector is `@(form)`, not `@form` (note the parenthesis). Additionally, the IDs should be separated with spaces only, no commas. – Sva.Mu Sep 11 '15 at 14:38

score 0 · Accepted Answer · answered Jan 27 '16 at 00:59

This was caused by unrelated javascript in a menu section which declared a jquery.js library. When I removed the offending import, all of the strange Primefaces errors went away. It seems declaring other jquery libraries interferes with Primefaces code.

p:calendar not working within p:tabView

2 Answers2