A page has two p:panels. One of the panels contains a p:pickList control and a h:commandButton used to submit an action. Without ajax, this works fine in Chrome, FireFox and IE, but when I add ajax to the command button, second panel, containing the button, disappear when button is clicked.
Following is the xhtml page with Ajax part commented out.
Code: Select all
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!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.prime.com.tr/ui">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Insert title here</title>
</head>
<body>
<ui:composition template="/headerContentLayout.xhtml">
<ui:define name="content">
<h:messages styleClass="errorMessage" infoClass="infoMessage" showSummary="true" showDetail="true" globalOnly="true" />
<h:form id="primeFacesDemoForm" prependId="false">
<h:panelGrid id="primeFacesDemoGrid" columns="2" border="0" columnClasses="panelLabelColumn r, panelDataColumn l">
<h:outputLabel for="date1" value="Date Picker:" />
<p:calendar id="date1" value="#{primeFacesBean.date1}" navigator="false" />
<h:outputText for="autoCompleteText" value="Autocomplete:" />
<p:autoComplete id="autoCompleteText" value="#{primeFacesBean.autoCompleteText}" completeMethod="#{primeFacesBean.complete}" />
<f:facet name="footer">
<h:commandButton id="doSomething" action="#{primeFacesBean.showValues}" immediate="false" value="Submit" title="Submit" />
</f:facet>
</h:panelGrid>
<p:panel id="dataTablePanel" header="Data Table" footer="dataTable" toggleable="true">
<h:dataTable id="rolesDataTable" value="#{primeFacesBean.allRoles}" var="role">
<h:column>
<f:facet name="header">id</f:facet>
<h:outputText value="#{role.id}" />
</h:column>
<h:column>
<f:facet name="header">name</f:facet>
<h:outputText value="#{role.name}" />
</h:column>
<h:column>
<f:facet name="header">description</f:facet>
<h:outputText value="#{role.description}" />
</h:column>
<f:facet name="footer">
<h:commandButton id="printDataTableButton" value="Print">
<p:printer target="rolesDataTable" />
</h:commandButton>
</f:facet>
</h:dataTable>
<h:commandLink value="export">
<!--p:dataExporter type="xml" target="rolesDataTable" fileName="roles" pageOnly="true" /-->
<p:dataExporter type="pdf" target="rolesDataTable" fileName="roles" pageOnly="true" />
</h:commandLink>
</p:panel>
<p:panel id="pickListPanel" header="Pick List" footer="with Ajax" toggleable="false" style="margin-top: 60px;">
<p:pickList id="rolesPickList" value="#{primeFacesBean.rolesPicker}" var="role" itemLabel="#{role.name}" itemValue="#{role}" converter="roleConverter" converterMessage="Converter error" />
<h:message for="rolesPickList" />
<br />
<h:commandButton id="showPickedRolesButton" action="#{primeFacesBean.showPickedRoles}" value="Show Picked" />
<!-- onclick="jsf.ajax.request(this,event, {execute:'pickListPanel',render:'pickListPanel'});return false;" /-->
</p:panel>
</h:form>
<h:outputStylesheet name="css/style.css" />
</ui:define>
</ui:composition>
</body>
</html>