p:tabView no more tabs AFTER p:ajax event="tabChange"

UI Components for JSF
Post Reply
smithh032772
Posts: 6144
Joined: 10 Sep 2011, 21:10

03 Dec 2011, 16:13

Issue 2967 opened for this defect.
http://code.google.com/p/primefaces/iss ... il?id=2967

My JSF/PrimeFaces app is using AJAX and non-AJAX requests to update ui:include src="#{bean.page}" to display pages/content. Today, was my first attempt to code p:ajax event="tabChange" as follows. Please see test results. This defect occurs with or without referencing the ajax listener.

Code: Select all

<p:ajax event="tabChange" listener="#{pf_customerController.onTabChange}" update=":pageContentPanel"/>
BEFORE tabChange

Image

AFTER tabChange

Image

index.xhtml (parent, which ui:include src="#{bean.page}")

Code: Select all

<?xml version='1.0' encoding='UTF-8' ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui">
    
    <h:head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title><h:outputText value="MCMS"/></title>
        <h:outputStylesheet name="#{pageNavigationController.css}"/>
    </h:head>

    <h:body>
        
        <ui:include src="/header_menubar.xhtml"/>
        
        <p:outputPanel id="pageContentPanel" style="width: 100%; height: 100%">

            <p:ajaxStatus>
                <f:facet name="start">
    <!--                    
                    <p:outputPanel layout="block" style="z-index:9999; position: absolute; top: 15px; left: 94%;">
                        <p:graphicImage value="/resources/images/loading3.gif" />
                    </p:outputPanel>
    -->                    
                    <p:outputPanel layout="block" style="#{pageNavigationController.ajaxStatusStyle}">
                        <h:outputText value="Working..." />
                    </p:outputPanel>
                </f:facet>

                <f:facet name="error">
                    <p:outputPanel layout="block" style="text-align: center !important;">
                        <h:outputText value="Error on partial page refresh." />
                    </p:outputPanel>
                </f:facet>

                <f:facet name="complete">

                </f:facet>
            </p:ajaxStatus>

            <p:outputPanel layout="block">
                <ui:include src="#{pageNavigationController.page}"/>
            </p:outputPanel>

        </p:outputPanel>

        
    </h:body>

</html>
/customer/pf_View.xhtml (contains p:tabView, p:ajax event="tabChange", and ui:include src="#{bean.page}" on each tab page)

Code: Select all

<?xml version='1.0' encoding='UTF-8' ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui">
    
    <ui:composition>
        
        <h:form id="customerDetailForm">

            <p:messages showDetail="true" showSummary="true" />

            <p:panel id="customerDetailPanel" header="Customer: #{pf_customerController.selected.customerName}">

                <h:panelGroup layout="block">

                    <p:commandButton value="Browse" image="ui-icon-search" immediate="true"
                                     actionListener="#{pf_customerController.prepareList}" update=":pageContentPanel"/>
                    <p:commandButton value="Delete" image="ui-icon ui-icon-trash"
                                     actionListener="#{pf_customerController.delete}" update=":pageContentPanel"/>
                    <p:commandButton value="Edit" image="ui-icon ui-icon-pencil"
                                     actionListener="#{pf_customerController.prepareEdit}" update=":pageContentPanel"/>

                </h:panelGroup>

                <br/>

                <p:tabView id="rowDetailTab" activeIndex="0" dynamic="true">

                    <p:ajax event="tabChange" listener="#{pf_customerController.onTabChange}" update=":pageContentPanel"/>
                        
                    <p:tab title="Customer">
                        
                        <h:panelGrid columns="2" cellpadding="3" cellspacing="3">

                            <h:outputLabel value="Customer ID:" />
                            <h:outputText id="customerId" value="#{pf_customerController.selected.customerId}" />

                            <h:outputLabel value="Customer Name:" />
                            <h:outputText id="customerName" value="#{pf_customerController.selected.customerName}" />
                            
                            <h:outputLabel value="Notes:" />
                            <h:outputText escape="false" id="customerNotes" value="#{pf_customerController.getNotesDisplay(pf_customerController.selected.notesId.notesTx)}" />

                        </h:panelGrid>
                        
                        <p:panel header="Address">

                            <p:dataTable value="#{pf_addressController.getAddressList()}" var="address">

                                <p:column headerText="Type" style="text-align: center !important;">
                                    <h:outputText value="#{address.addressTypeId.addressTypeName}" />
                                </p:column>

                                <p:column headerText="Line(s)">
                                    <h:outputText escape="false" value="#{pf_addressController.getAddressLineListDisplay(address.addressLines)}" />
                                </p:column>

                                <p:column headerText="City">
                                    <h:outputText value="#{address.city}" />
                                </p:column>

                                <p:column headerText="State" style="text-align: center !important;">
                                    <h:outputText value="#{address.state}" />
                                </p:column>

                                <p:column headerText="Postal Code" style="text-align: center !important;">
                                    <h:outputText value="#{address.postalCode}" />
                                </p:column>

                                <p:column headerText="Country" style="text-align: center !important;">
                                    <h:outputText value="#{address.country}" />
                                </p:column>

                            </p:dataTable>

                        </p:panel>

                        <p:panel header="Email Address">

                            <p:dataTable value="#{pf_emailAddressController.getEmailAddressList()}" var="emailAddress">

                                <p:column headerText="Type" style="text-align: center !important;">
                                    <h:outputText value="#{emailAddress.emailAddressTypeId.emailAddressTypeName}" />
                                </p:column>

                                <p:column headerText="Email Address" style="text-align: center !important;">
                                    <h:outputText value="#{emailAddress.emailAddressTx}" />
                                </p:column>

                            </p:dataTable>

                        </p:panel>

                        <p:panel header="Phone Number">

                            <p:dataTable value="#{pf_phoneController.getPhoneList()}" var="phone">

                                <p:column headerText="Type" style="text-align: center !important;">
                                    <h:outputText value="#{phone.phoneTypeId.phoneTypeName}" />
                                </p:column>

                                <p:column headerText="Phone Number" style="text-align: center !important;">
                                    <h:outputText value="#{phone.phoneNumber}" />
                                </p:column>

                            </p:dataTable>

                        </p:panel>

                        <p:panel header="Point Of Contacts">
                            
                            <p:tabView var="pointOfContact" value="#{pf_pointOfContactController.getPointOfContactListFromDB()}">

                                <p:tab title="#{pointOfContact.pointOfContactName}">

                                    <h:panelGrid columns="2" cellpadding="3" cellspacing="3">

                                        <h:outputLabel value="Point Of Contact ID:" />
                                        <h:outputText id="customerPocId" value="#{pointOfContact.pointOfContactId}" />

                                        <h:outputLabel value="Point Of Contact Name:" />
                                        <h:outputText id="customerPocName" value="#{pointOfContact.pointOfContactName}" />

                                        <h:outputLabel value="Notes:" />
                                        <h:outputText escape="false" id="customerPocNotes" value="#{pf_pointOfContactController.getNotesDisplay(pointOfContact.notesId.notesTx)}" />

                                    </h:panelGrid>

                                    <p:panel header="Address">

                                        <p:dataTable value="#{pf_pocAddressController.getAddressList(pf_pointOfContactController.tableName, pointOfContact.pointOfContactId)}" var="pocAddress">

                                            <p:column headerText="Type" style="text-align: center !important;">
                                                <h:outputText value="#{pocAddress.addressTypeId.addressTypeName}" />
                                            </p:column>

                                            <p:column headerText="Line(s)">
                                                <h:outputText escape="false" value="#{pf_pocAddressController.getAddressLineListDisplay(pocAddress.addressLines)}" />
                                            </p:column>

                                            <p:column headerText="City">
                                                <h:outputText value="#{pocAddress.city}" />
                                            </p:column>

                                            <p:column headerText="State" style="text-align: center !important;">
                                                <h:outputText value="#{pocAddress.state}" />
                                            </p:column>

                                            <p:column headerText="Postal Code" style="text-align: center !important;">
                                                <h:outputText value="#{pocAddress.postalCode}" />
                                            </p:column>

                                            <p:column headerText="Country" style="text-align: center !important;">
                                                <h:outputText value="#{pocAddress.country}" />
                                            </p:column>

                                        </p:dataTable>

                                    </p:panel>

                                    <p:panel header="Email Address">

                                        <p:dataTable value="#{pf_pocEmailAddressController.getEmailAddressList(pf_pointOfContactController.tableName, pointOfContact.pointOfContactId)}" var="pocEmailAddress">

                                            <p:column headerText="Type" style="text-align: center !important;">
                                                <h:outputText value="#{pocEmailAddress.emailAddressTypeId.emailAddressTypeName}" />
                                            </p:column>

                                            <p:column headerText="Email Address" style="text-align: center !important;">
                                                <h:outputText value="#{pocEmailAddress.emailAddressTx}" />
                                            </p:column>

                                        </p:dataTable>

                                    </p:panel>

                                    <p:panel header="Phone Number">

                                        <p:dataTable value="#{pf_pocPhoneController.getPhoneList(pf_pointOfContactController.tableName, pointOfContact.pointOfContactId)}" var="pocPhone">

                                            <p:column headerText="Type" style="text-align: center !important;">
                                                <h:outputText value="#{pocPhone.phoneTypeId.phoneTypeName}" />
                                            </p:column>

                                            <p:column headerText="Phone Number" style="text-align: center !important;">
                                                <h:outputText value="#{pocPhone.phoneNumber}" />
                                            </p:column>

                                        </p:dataTable>

                                    </p:panel>
                                    
                                </p:tab>

                            </p:tabView>

                        </p:panel>
                        
                        <h:panelGrid columns="2" cellpadding="3" cellspacing="3">

                            <h:outputLabel value="Created:" />
                            <h:outputText value="#{pf_customerController.selected.createdDt}" >
                                <f:convertDateTime pattern="MM/dd/yyyy hh:mm:ss a" />
                            </h:outputText>

                            <h:outputLabel value="Changed:" />
                            <h:outputText value="#{pf_customerController.selected.changedDt}" >
                                <f:convertDateTime pattern="MM/dd/yyyy hh:mm:ss a" />
                            </h:outputText>

                        </h:panelGrid>

                    </p:tab>

                    <p:tab title="Address">

                        <p:outputPanel id="addressTabPanel" layout="block">
                            <ui:include src="#{pf_addressController.getPage(pf_customerController.tableName, pf_customerController.selected, pf_customerController.selected.customerId)}"/>
                        </p:outputPanel>

                    </p:tab>

                    <p:tab title="Email Address">

                        <p:outputPanel id="emailAddressTabPanel" layout="block">
                            <ui:include src="#{pf_emailAddressController.getPage(pf_customerController.tableName, pf_customerController.selected, pf_customerController.selected.customerId)}"/>
                        </p:outputPanel>

                    </p:tab>

                    <p:tab title="Phone Number">

                        <p:outputPanel id="phoneTabPanel" layout="block">
                            <ui:include src="#{pf_phoneController.getPage(pf_customerController.tableName, pf_customerController.selected, pf_customerController.selected.customerId)}"/>
                        </p:outputPanel>

                    </p:tab>

                    <p:tab title="Point Of Contact">

                        <p:outputPanel id="pointOfContactTabPanel" layout="block">
                            <ui:include src="#{pf_pointOfContactController.getPage(pf_customerController.tableName, pf_customerController.selected, pf_customerController.selected.customerId)}"/>
                        </p:outputPanel>

                    </p:tab>

                </p:tabView>

            </p:panel>

        </h:form>

    </ui:composition>

</html>
/address/pf_Browse.xhtml
1. This is the page that was designed to be displayed on the Address tab page of p:tabView
2. This page is displayed in the place of tabView after p:ajax event="tabChange" is executed (as demonstrated in 2nd screen capture above)

Code: Select all

<?xml version='1.0' encoding='UTF-8' ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui">
    
    <ui:composition>
        
        <p:dataTable id="addressDataTable"
                     value="#{pf_addressController.dataModel}"
                     var="address" selection="#{pf_addressController.selectedRows}" selectionMode="multiple"
                     rowKey="#{address.addressId}">

            <p:column>
                <f:facet name="header">
                    <h:outputText value="Type" />
                </f:facet>
                <h:outputText value="#{address.addressTypeId.addressTypeName}" />
            </p:column>

            <p:column>
                <f:facet name="header">
                    <h:outputText value="Line(s)" />
                </f:facet>
                <h:outputText escape="false" value="#{pf_addressController.getAddressLineListDisplay(address.addressLines)}" />
            </p:column>

            <p:column>
                <f:facet name="header">
                    <h:outputText value="City" />
                </f:facet>
                <h:outputText value="#{address.city}" />
            </p:column>

            <p:column>
                <f:facet name="header">
                    <h:outputText value="State" />
                </f:facet>
                <h:outputText value="#{address.state}" />
            </p:column>

            <p:column>
                <f:facet name="header">
                    <h:outputText value="Postal Code" />
                </f:facet>
                <h:outputText value="#{address.postalCode}" />
            </p:column>

            <p:column>
                <f:facet name="header">
                    <h:outputText value="Country" />
                </f:facet>
                <h:outputText value="#{address.country}" />
            </p:column>

        </p:dataTable>

        <h:panelGroup layout="block">

            <p:commandButton value="Add" image="ui-icon ui-icon-circle-plus"
                             actionListener="#{pf_addressController.prepareCreate}" update=":pageContentPanel addressTabPanel"/>
            <p:commandButton value="Delete" image="ui-icon ui-icon-trash"
                             actionListener="#{pf_addressController.deleteSelectedRows}" update=":pageContentPanel addressTabPanel"/>
            <p:commandButton value="Edit" image="ui-icon ui-icon-pencil"
                             actionListener="#{pf_addressController.prepareEdit}" update=":pageContentPanel addressTabPanel"/>

        </h:panelGroup>


    </ui:composition>

</html>
I think the fix for this tabView tabChange ajax event will fix similar issues reported in the following:

viewtopic.php?f=3&t=16310

viewtopic.php?f=3&t=15934&p=50605#p48397
Howard

PrimeFaces 6.0, Extensions 6.0.0, Push (Atmosphere 2.4.0)
TomEE+ 1.7.4 (Tomcat 7.0.68), MyFaces Core 2.2.9, JDK8
JUEL 2.2.7 | OmniFaces | EclipseLink-JPA/Derby | Chrome

Java EE 6 Tutorial|NetBeans|Google|Stackoverflow|PrimeFaces|Apache

Post Reply

Return to “PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 29 guests