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"/>
AFTER tabChange
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>
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>
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>
viewtopic.php?f=3&t=16310
viewtopic.php?f=3&t=15934&p=50605#p48397