I followed the DataTable Filter showcase from PrimeFaces on my own DataTable. Every time the "onkeyup" event occurs I get a
TypeError: PF(...) is undefined error in Firebug and a "Uncaught
TypeError: Cannot read property 'filter' of undefined
in Chrome Console. The filtering does not work.
Here is my XHTML page:
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<h:head>
<h:title>List of User</h:title>
</h:head>
<h:body>
<h:form id="UserForm" name="UserRecords">
<p:dataTable id="users" widgetVar="usersTable" var="user" value="#{userBean.users}" scrollable="false" frozenColumns="0" sortMode="multiple" stickyHeader="true" filteredValue="#{userBean.filteredUsers}">
<f:facet name="header">User<p:inputText id="globalFilter" onkeyup="PF('usersTable').filter()" style="float:right" placeholder="Filter"/>
<p:commandButton id="toggler" type="button" style="float:right" value="Columns" icon="ui-icon-calculator"/>
<p:columnToggler datasource="users" trigger="toggler"/>
<p:commandButton id="optionsButton" value="Options" type="button" style="float:right"/>
<p:menu overlay="true" trigger="optionsButton" my="left top" at="left bottom">
<p:submenu label="Export">
<p:menuitem value="XLS">
<p:dataExporter type="xls" target="users" fileName="users"/>
</p:menuitem>
<p:menuitem value="PDF">
<p:dataExporter type="pdf" target="users" fileName="users"/>
</p:menuitem>
<p:menuitem value="CSV">
<p:dataExporter type="csv" target="users" fileName="users"/>
</p:menuitem>
<p:menuitem value="XML">
<p:dataExporter type="xml" target="users" fileName="users"/>
</p:menuitem>
</p:submenu>
</p:menu>
</f:facet>
<p:column disabledSection="false" colspan="1" exportable="true" filterBy="#{user.firstName}" filterMatchMode="startsWith" filterStyle="display:none; visibility:hidden;" filterable="true" headerText="FirstName" priority="0" rendered="true" resizable="true" rowspan="1" selectRow="true" sortable="true" toggleable="true" visible="true">
<h:outputText value="#{user.firstName}"/>
</p:column>
<p:column disabledSection="false" colspan="1" exportable="true" filterBy="#{user.lastName}" filterMatchMode="startsWith" filterStyle="display:none; visibility:hidden;" filterable="true" headerText="LastName" priority="0" rendered="true" resizable="true" rowspan="1" selectRow="true" sortable="true" toggleable="true" visible="true">
<h:outputText value="#{user.lastName}"/>
</p:column>
<p:column disabledSection="false" colspan="1" exportable="true" filterBy="#{user.username}" filterMatchMode="startsWith" filterStyle="display:none; visibility:hidden;" filterable="true" headerText="Username" priority="0" rendered="true" resizable="true" rowspan="1" selectRow="true" sortable="true" toggleable="true" visible="true">
<h:outputText value="#{user.username}"/>
</p:column>
<p:column disabledSection="false" colspan="1" exportable="true" filterBy="#{user.password}" filterMatchMode="startsWith" filterStyle="display:none; visibility:hidden;" filterable="true" headerText="Password" priority="0" rendered="true" resizable="true" rowspan="1" selectRow="true" sortable="true" toggleable="true" visible="true">
<h:outputText value="#{user.password}"/>
</p:column>
<p:column disabledSection="false" colspan="1" exportable="true" filterBy="#{user.id}" filterMatchMode="startsWith" filterStyle="display:none; visibility:hidden;" filterable="true" headerText="Id" priority="0" rendered="true" resizable="true" rowspan="1" selectRow="true" sortable="true" toggleable="true" visible="true">
<h:outputText value="#{user.id}"/>
</p:column>
<p:column disabledSection="false" colspan="1" exportable="true" filterBy="#{user.createdOn}" filterMatchMode="startsWith" filterStyle="display:none; visibility:hidden;" filterable="true" headerText="CreatedOn" priority="0" rendered="true" resizable="true" rowspan="1" selectRow="true" sortable="true" toggleable="true" visible="true">
<h:outputText value="#{user.createdOn}"/>
</p:column>
<p:column disabledSection="false" colspan="1" exportable="true" filterBy="#{user.lastModified}" filterMatchMode="startsWith" filterStyle="display:none; visibility:hidden;" filterable="true" headerText="LastModified" priority="0" rendered="true" resizable="true" rowspan="1" selectRow="true" sortable="true" toggleable="true" visible="true">
<h:outputText value="#{user.lastModified}"/>
</p:column>
</p:dataTable>
</h:form>
</h:body>
</html>
I'm using PrimeFaces 5.2 with Mojarra 2.2.8 and JSF 2.2.10.
In my case, I found that my TypeError: PF(...) is undefined error (without the additional property error) was caused by Primefaces not being able to find the widget widgetVar="usersTable" for example because of a spelling error
In this case, the console output right above the error in Firebug gives you the explanation Widget for var 'editExecContactDialogg' not available!
That can happen when the runtime classpath is dirty of duplicate different versioned libraries. Conflicts would then occur during class loading and resource resolving.
Make sure that you're using only one version of a library. This not only applies to PrimeFaces, but also to Mojarra. Having both 2.2.8 and 2.2.10 is definitely not right.
Like #hendinas' answer, this is not the solution to the particular problem, but might be helpful for future Googlers that have the exact same error but with a different cause.
This is an additional case of #hendinas' answer, but where the thing you're referring to is not found because it does not have the same rendered conditions. Here is an example.
<ui:repeat id="extSyses" var="extSys" value="${cc.attrs.externalSystems}"
varStatus="extSysLoop">
<h:commandButton
id="YesButton" value="Yes" type="button"
rendered='#{(rptBean.canEditReport or rptBean.canAnnotateReport) and not extSys.closed)}'
onclick="PF('#{cc.attrs.prefix}yesDlg#{extSysLoop.index}').show()" />
<p:dialog id="extDocDlg" header='Enter document reference number'
rendered='#{rptBean.canEditReport and not extSys.closed)}'
widgetVar="#{cc.attrs.prefix}yesDlg#{extSysLoop.index}"
width="650" minWidth="650" modal="true">
... Dialog Content ...
</p:dialog>
</ui:repeat>
In this case, the widgetVar matched the value of onclick, so that was good. However, the rendered clause differed. If canEditReport was true, then everything worked fine. However, if canAnnotateReport was true, then the button would show up but it would have no dialog to display! When the button is clicked, the TypeError: PF(…) is undefined message is displayed.
In this example, the solution is to make the rendered clauses the same for both the button and the dialog it refers to.
Related
This question already has answers here:
How to show details of current row from p:dataTable in a p:dialog and update after save
(1 answer)
p:resetInput does not reset the p:dialog when it is reopened
(1 answer)
Closed 2 years ago.
I have a problem with resetting the values of a <p: selectOneMenu> component that is housed within a <p: dialog> component, it turns out that I have declared the <p: dialog> on the same page where I show it with a < p: commandButton> and I want that when I finish editing the data and press the button again, the component <p: selectOneMenu> comes out with the initial values, and this is not happening, instead it keeps the selection I made previously. Thank you very much for the help you can give me. this is the code of the page. I don't think it is necessary to put the code for the backing beans but they do need it without problem.
<?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://xmlns.jcp.org/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core">
<body class="areaContenido">
<ui:composition template="../resources/template/tgeneral.xhtml">
<ui:define name="content" class="areaContenido">
<h:form id="guser">
<p:growl id="msgs" showDetail="true" />
<p:dataTable var="usermio" value="#{userBean.lazyModel}" paginator="true" rows="10" class="FuentTable" rowKey="#{usermio.id}"
paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}"
rowsPerPageTemplate="5,10,15" id="userTable" lazy="true">
<f:facet name="header">
<p:outputLabel value="Gestión de usuarios del sistema" style="font-weight: bold; text-align: center;"/>
</f:facet>
<p:column headerText="Id" width="5%">
<h:outputText value="#{usermio.id}" />
</p:column>
<p:column headerText="Usuario" width="15%" >
<h:outputText value="#{usermio.usuario}" />
</p:column>
<p:column headerText="Nombre" width="20%">
<h:outputText value="#{usermio.nombre}"/>
</p:column>
<p:column headerText="Apellidos" width="25%">
<h:outputText value="#{usermio.apellidos}" />
</p:column>
<p:column headerText="Rol" width="15%">
<h:outputText value="#{usermio.rol.rol}" />
</p:column>
<p:column headerText="Opt" width="15%">
<p:commandButton value="" update=":guser:userEdit" onclick="PF('userDial').show()" icon="ui-icon-pencil" ajax="true" >
<f:setPropertyActionListener value="#{usermio}" target="#{userBean.selecteduser}" />
</p:commandButton>
<p:commandButton value="" update=":guser:userEdit" onclick="PF('cd').show()" icon="ui-icon-key" ajax="true">
<f:setPropertyActionListener value="#{usermio}" target="#{userBean.selecteduser}" />
</p:commandButton>
<p:commandButton value="" update=":guser:userEdit" onclick="PF('cd').show()" icon="ui-icon-cancel" ajax="true">
<f:setPropertyActionListener value="#{usermio}" target="#{userBean.selecteduser}" />
</p:commandButton>
</p:column>
<f:facet name="footer">
<p:button icon="ui-icon-plus" id="nuevo" value="Nuevo" href="/glitic/adm/register.xhtml" title="Nuevo usuario" />
</f:facet>
</p:dataTable>
<p:dialog header="Edición de datos" widgetVar="userDial" modal="true" showEffect="bounce" hideEffect="fade" resizable="false" class="Fuent" responsive="true" >
<p:outputPanel id="userEdit" style="text-align:center;">
<p:panelGrid columns="2" rendered="#{not empty userBean.selecteduser}" columnClasses="label,value">
<h:outputText value="Id:" />
<h:outputText value="#{userBean.selecteduser.id}" />
<h:outputText value="Usuario" />
<p:inputText value="#{userBean.selecteduser.usuario}" id="username" required="true" requiredMessage="Se necesita el usuario"/>
<h:outputText value="Nombres" />
<p:inputText value="#{userBean.selecteduser.nombre}" id="nombre" required="true" requiredMessage="Se necesita el nombre"/>
<h:outputText value="Apellidos" />
<p:inputText value="#{userBean.selecteduser.apellidos}" id="apellidos" required="true" requiredMessage="Se necesita los apellidos"/>
<h:outputText value="Rol" />
<p:selectOneMenu id="sroles" value="#{userBean.selectedrol}" style="width:160px" effect="fold" >
<f:selectItem itemLabel="Escoja un rol para el usuario" itemValue="" />
<f:selectItems value="#{userBean.roles}" var="xroles" itemLabel="#{xroles.rol}" itemValue="#{xroles.id}" />
</p:selectOneMenu>
<h:outputText value="Guardar cambios:" />
<p:commandButton value="Guardar" action="#{cttobean.NVenta()}" ajax="false"/>
</p:panelGrid>
</p:outputPanel>
</p:dialog>
</h:form>
</ui:define>
</ui:composition>
</body>
</html>
Hello guys i have a problem updating some components, i am using JSF, Primefaces 5.3, Hibernate.
i Have this tab that contains a datatable: tab 1 and i have this other tab tab 2 what i want to do is when i change Farmaceutica column in tab 2 and click Guardar Cambios i want to update the datatable of the tab 1. I can update the datatabase and when i logout and login again the change is there but i want the change without logout.
This is my admin.xhtml:
<h:form id="frm">
<p:growl id="growl" life="3500" sticky="false" showDetail="true" />
<div class="navbar color-bar"></div>
<div class="container-fluid">
<div class="row">
<div class="col-md-7">
<div class="row">
<div class="col-md-12">
<p:tabView id="tabs">
<p:tab title="Estado asignaciones">
<p:panel id="panelEstado">
<h:form id="formDta">
<p:dataTable
value="#{estadoAsignaciones.listaEstadoAsignaciones}"
var="data" paginator="true" rowKey="#{data.idAuditor}"
rows="10" selectionMode="single"
selection="#{estadoAsignaciones.estadoAsignaciones}">
<p:ajax event="rowSelect"
listener="#{estadoAsignaciones.onRowSelect()}"
onstart="PF('blockUIWidget').show()"
oncomplete="PF('overPnl').show()" update="frm" />
<p:column headerText="Auditor">
<h:outputLabel
value="#{data.nombreAuditor} #{data.apellidoAuditor}" />
</p:column>
<p:column headerText="Farmacéutica">
<h:outputLabel value="#{data.farmaceuticaAsignada}" />
</p:column>
<p:column headerText="Progreso">
<p:progressBar value="#{data.porcentaje}"
labelTemplate="{value}%" id="avanceBar" style="width:80%" />
</p:column>
</p:dataTable>
</h:form>
</p:panel>
<p:overlayPanel id="panelOver" widgetVar="overPnl"
showEffect="fade" hideEffect="fade" dismissable="false"
showCloseIcon="true">
<p:panel id="avance" header="Avance auditoria"
class="space robotome">
<p:progressBar id="avanceBar"
value="#{estadoAsignaciones.porcentajeValue}"
style="width:100%" labelTemplate="{value}%" />
</p:panel>
<p:panel id="tiempo" header="Tiempo" class="space robotome">
<h:outputLabel
value="Fecha inicio: #{estadoAsignaciones.fecha}" />
<br />
<h:outputLabel
value="Fecha Actual: #{estadoAsignaciones.fechaActual}" />
<br />
<h:outputLabel
value="Hora inicio: #{estadoAsignaciones.hora}" />
<br />
<h:outputLabel
value="Tiempo transcurrido: #{estadoAsignaciones.calHoraDif} horas" />
</p:panel>
<p:panel id="auditor" header="Auditor" class="robotome">
<p:outputLabel
value="Nombres: #{estadoAsignaciones.getEstadoAsignaciones().nombreAuditor}" />
<br />
<p:outputLabel
value="Apellidos: #{estadoAsignaciones.getEstadoAsignaciones().apellidoAuditor}" />
</p:panel>
</p:overlayPanel>
<p:blockUI block="frm" widgetVar="blockUIWidget">
<p:graphicImage name="imgs/loading.gif" width="50" height="50" />
</p:blockUI>
</p:tab>
<p:tab title="Asignaciones">
<p:dataTable id="dtA"
value="#{asignacionesBean.seleccionAuditores}" var="auditor"
paginator="true" rows="5">
<p:column headerText="Auditor">
<h:outputText value="#{auditor.nombreAuditor}" />
</p:column>
<p:column headerText="Farmaceutica">
<p:selectOneMenu value="#{auditor.idFarmaceutica}">
<f:selectItem itemLabel="#{data.farmaceutica}"
noSelectionOption="true" itemDisabled="true" itemValue="" />
<f:selectItems
value="#{asignacionesBean.mapSeleccionFarmaceuticas}" />
</p:selectOneMenu>
</p:column>
<p:column>
<p:commandButton value="Guardar cambios" update=":frm"
actionListener="#{asignacionesBean.guardarRespuestaAsignaciones(auditor)}"
process="#this"
onclick="PF('blockUIWidgetAsignaciones').hide()"
onsuccess="PF('blockUIWidgetAsignaciones').show()" />
</p:column>
</p:dataTable>
I appreciate your help.
I could not understant why you are using form inside form. Delete all forms except the main one.
In your first tab, add id to your datatable. and put prependId=false to your panel grid as below.
<p:panel id="panelEstado" prependId="false">
<p:dataTable id="firstTable" value="#{estadoAsignaciones.listaEstadoAsignaciones}"
var="data" paginator="true" rowKey="#{data.idAuditor}"
rows="10" selectionMode="single" selection="#{estadoAsignaciones.estadoAsignaciones}">
Then in Farmaceutica column in tab 2 change code like below
<p:selectOneMenu value="#{auditor.idFarmaceutica}">
<f:selectItem itemLabel="#{data.farmaceutica}" noSelectionOption="true" itemDisabled="true" itemValue="" />
<f:selectItems value="#{asignacionesBean.mapSeleccionFarmaceuticas}" />
<p:ajax event="valueChange" update=":firstTable"/>
</p:selectOneMenu>
in Guardar Cambios change your code to this one.
<p:commandButton value="Guardar cambios" update=":firstTable" actionListener="#{asignacionesBean.guardarRespuestaAsignaciones(auditor)}" process="#this"
onclick="PF('blockUIWidgetAsignaciones').hide()" onsuccess="PF('blockUIWidgetAsignaciones').show()" />
I have an issue with the footer row that i need to display in primefaces. In UI there is an extra space that comes up between the grid and the footer row which is kind of annoying. Is there anything that is going wrong. Any suggestions are most welcome. Please find my below code.
<!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:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui"
xmlns:ui="http://java.sun.com/jsf/facelets"
>
<h:head>
</h:head>
<body style="height: 90%">
<ui:composition template="template/common/commonPrimefacesLayout.xhtml">
<ui:define name="content">
<h:form id="searchFormForResult" prependId="false">
<h:inputHidden id="rowId" value="#{MBean.selectedRowId}"></h:inputHidden>
<p:accordionPanel style="align:top;margin" prependId="false">
<p:tab title="Search Items">
<p:panelGrid columns="2" cellpadding="5">
<p:outputLabel for="expenseDesc" value=" Description: " />
<p:selectOneMenu id="expenseDesc" widgetVar="expenseDesc" value="#{searchMBean.searchCriteria.shortDesc}" style="width:150px" editable="true" filter="true" filterMatchMode="startsWith">
<f:selectItem itemLabel="All" itemValue="All" noSelectionOption="false"/>
<f:selectItems value="#{searchMBean.shortDescriptionList}" />
</p:selectOneMenu>
</p:panelGrid>
<p:commandButton id="Reset" actionListener="#{searchMBean.resetForm}" value="Reset" ajax="false" style="float:right;" onclick="resetSearchForm()"></p:commandButton>
<p:commandButton id="Submit" action="#{searchMBean.search}" value="Submit" ajax="false" style="float:right;"></p:commandButton>
</p:tab>
</p:accordionPanel>
<p:panel>
<h:outputLabel value="Search Results" style="font-weight: bold;"></h:outputLabel>
<p:dataTable id="SearchResult" var="SearchResult" value="#{searchMBean.searchResult}" selection="#{MBean.itemsSearchResult}" rowKey="#{searchResult.id}" scrollable="true" rowSelectMode="multiple" scrollHeight="65%">
<p:column selectionMode="multiple" style="width:5%;"/>
<p:column>
<f:facet name="header">
<h:outputText value="Contact Name" />
</f:facet>
<h:outputText value="#{mBean.name}" />
<f:facet name="footer">
<h:outputText value="#{mBean.name}" />
</f:facet>
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Contact Address" />
</f:facet>
<h:outputText value="#{mBean.addr}" />
<f:facet name="footer">
<h:outputText value="#{mBean.name}" />
</f:facet>
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Actions" />
</f:facet>
<p:commandButton action="#{MBean.display}" icon="ui-icon ui-icon-search" title="ViewButton" oncomplete="disableFields('singleRowView');">
<f:param name="itemId" value="#{searchResult.id}"></f:param>
</p:commandButton>
<p:commandButton action="#{MBean.display}" icon="ui-icon ui-icon-pencil" title="UpdateButton" oncomplete="disableFields('singleRowView');">
<f:param name="itemId" value="#{Result.id}"></f:param>
</p:commandButton>
<p:commandButton id="delete"
icon="ui-icon ui-icon-trash"
action="#{MBean.ItemRow}"
onclick="setSelectedRowId('rowId',#{result.id})"
title="GDeleteButton">
<p:confirm header="Delete Record"
message="Are you sure about deleting this record?"
icon="ui-icon-alert"/>
</p:commandButton>
<p:confirmDialog global="true" showEffect="fade">
<p:commandButton title="GDelYesButton" value="Yes" styleClass="ui-confirmdialog-yes"/>
<p:commandButton title="GDelNoButton" value="No" onclick="PF('confirmation').hide()" styleClass="ui-confirmdialog-no" />
</p:confirmDialog>
</p:column>
</p:dataTable>
<p:panelGrid id="groupActions" columns="5">
<p:commandButton action="#{MBean.viewItems}" icon="ui-icon ui-icon-search" value="View" title="GViewButton" oncomplete="disableFields('groupView');">
</p:commandButton>
<p:commandButton action="#{MBean.viewItems}" icon="ui-icon ui-icon-pencil" value="Update" title="GUpdateButton" oncomplete="disableFields('groupView');">
</p:commandButton>
<p:button outcome="createItem" value="Add New" title="AddNewButton"/>
<p:commandButton id="delete" action="#{MBean.delete}" icon="ui-icon ui-icon-trash" value="Delete" title="Delete" >
<p:confirm header="Delete Record" message="Are you sure about deleting this record?" icon="ui-icon-alert"/>
</p:commandButton>
<p:commandButton actionListener="#{searchMBean.resetForm}" value="Cancel" title="Cancel" ajax="false"></p:commandButton>
</p:panelGrid>
<p:confirmDialog global="true" showEffect="fade">
<p:commandButton title="Yes" value="Yes" styleClass="ui-confirmdialog-yes" />
<p:commandButton title="No" value="No" styleClass="ui-confirmdialog-no" onclick="PF('groupDeleteConfirm').hide()" />
</p:confirmDialog>
</p:panel>
</h:form>
</ui:define>
</ui:composition>
</body>
</html>
Also please find the image of the behaviour. The extra spaace that is coming between grid and the footer. Please help.
I have this .xhtml file. It's a data table page with three buttons (one for creating users, one for editing them and one for deleting them). Creating and deleting users are working but updating not. When I call the method actionListener="#{usuariosBean.actualizarUsuario}", I get all parameters well but not the Id, I'm getting 0 instead of the real Id of the user.
I have tried to do it in different .xhtml and it work good so I think that the problem is about the .xhtml file but... I don't know. Could anybody help me? Thanks a lot!!!
<?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://xmlns.jcp.org/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<body>
<ui:composition template="./../template.xhtml">
<ui:define name="content">
<p:growl id="msgs" showDetail="true" />
<h:form>
<p:commandButton update=":formCrear" icon="ui-icon-document"
title="Crear Usuario" value="Crear Usuario"
oncomplete="PF('usuarioDialogCrear').show();">
</p:commandButton>
</h:form>
<h:form id="form">
<p:dataTable var="usuario" value="#{usuariosBean.usuarios}"
paginator="true" rows="10">
<p:column headerText="Id">
<h:outputText value="#{usuario.id}" />
</p:column>
<p:column headerText="Nombre de Usuario">
<h:outputText value="#{usuario.nombreDeUsuario}" />
</p:column>
<p:column headerText="Contraseña">
<h:outputText value="#{usuario.contrasenya}" />
</p:column>
<p:column headerText="Rol">
<h:outputText value="#{usuario.rol}" />
</p:column>
<p:column headerText="" style="text-align:center; width:4%">
<p:commandButton update=":form:usuarioActualizar" id="Actualizar"
icon="ui-icon-pencil" title="Actualizar"
oncomplete="PF('usuarioDialogActualizar').show();">
<f:setPropertyActionListener value="#{usuario}"
target="#{usuariosBean.usuarioSeleccionado}" />
</p:commandButton>
</p:column>
<p:column headerText="" style="text-align:center; width:4%">
<p:commandButton update=":form:usuarioEliminar" id="Eliminar"
icon="ui-icon-close" title="Eliminar"
oncomplete="PF('confirmacion').show();">
<f:setPropertyActionListener value="#{usuario}"
target="#{usuariosBean.usuarioSeleccionado}" />
</p:commandButton>
</p:column>
</p:dataTable>
<p:dialog header="Actualizar Usuario"
widgetVar="usuarioDialogActualizar" modal="true" showEffect="fade"
hideEffect="explode" resizable="false" width="400">
<p:outputPanel id="usuarioActualizar" style="text-align:center;"
layout="block">
<p:panelGrid columns="2">
<h:outputText value="Id " />
<p:inputText
value="#{usuariosBean.usuarioSeleccionado.id}"
style="font-weight:bold" size="37" />
<h:outputText value="Usuario: " />
<p:inputText
value="#{usuariosBean.usuarioSeleccionado.nombreDeUsuario}"
style="font-weight:bold" size="37" />
<h:outputText value="Contraseña: " />
<p:inputText
value="#{usuariosBean.usuarioSeleccionado.contrasenya}"
style="font-weight:bold" size="37" />
<h:outputText value="Rol " />
<p:inputText value="#{usuariosBean.usuarioSeleccionado.rol}"
style="font-weight:bold" size="37" />
</p:panelGrid>
</p:outputPanel>
<f:facet name="footer">
<p:commandButton update=":form, :msgs" id="btnActualizarAceptar"
icon="ui-icon-disk" title="Guardar Usuario"
value="Actualizar Usuario"
actionListener="#{usuariosBean.actualizarUsuario}"
oncomplete="PF('usuarioDialogActualizar').hide()">
</p:commandButton>
<p:commandButton id="btnActualizarCancelar" icon="ui-icon-close"
title="Cancelar" value="Cancelar" type="button"
onclick="PF('usuarioDialogActualizar').hide()">
</p:commandButton>
</f:facet>
</p:dialog>
<p:confirmDialog
message="¿Está seguro que desea eliminar el usuario?"
showEffect="bounce" hideEffect="explode" header="Eliminar Usuario"
severity="alert" widgetVar="confirmacion">
<p:outputPanel id="usuarioEliminar" style="text-align:center;"
layout="block">
<h:inputHidden value="#{usuariosBean.usuarioSeleccionado.id}" />
</p:outputPanel>
<p:commandButton id="confirmarDialogo" value="Aceptar"
icon="ui-icon-check" update=":form, :msgs"
oncomplete="PF('confirmacion').hide()"
actionListener="#{usuariosBean.eliminarUsuario}" />
<p:commandButton id="cancelarDialogo" icon="ui-icon-close"
title="Cancelar" value="Cancelar"
oncomplete="PF('confirmacion').hide()">
</p:commandButton>
</p:confirmDialog>
</h:form>
<h:form id="formCrear">
<p:dialog header="Crear Usuario" widgetVar="usuarioDialogCrear"
modal="true" showEffect="fade" hideEffect="explode"
resizable="false" width="400">
<p:outputPanel id="usuarioCrear" style="text-align:center;"
layout="block">
<p:panelGrid columns="2">
<h:outputText value="Usuario: " />
<p:inputText value="#{usuariosBean.nombreDeUsuario}"
required="true" size="37" />
<h:outputText value="Contraseña: " />
<p:inputText value="#{usuariosBean.contrasenya}" required="true"
size="37" />
<h:outputText value="Rol " />
<p:inputText value="#{usuariosBean.rol}" required="true"
size="37" />
</p:panelGrid>
</p:outputPanel>
<f:facet name="footer">
<p:commandButton update=":form, :msgs" id="btnCrearAceptar"
icon="ui-icon-disk" title="Guardar Usuario"
value="Guardar Usuario" action="#{usuariosBean.guardarUsuario}"
oncomplete="PF('usuarioDialogCrear').hide()">
</p:commandButton>
<p:commandButton id="btnCrearCancelar" icon="ui-icon-close"
title="Cancelar" value="Cancelar"
oncomplete="PF('usuarioDialogCrear').hide()">
</p:commandButton>
</f:facet>
</p:dialog>
</h:form>
</ui:define>
</ui:composition>
</body>
</html>
Well, I have a p:dialog that inserts a new Entity, but after this entity is saved into database the p:dataTable remains the same, the new row doesn't appear.
Look at my p:dialog:
<!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:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<h:head>
</h:head>
<h:body>
<ui:composition>
<h:form id="formCadastrar">
<p:dialog width="900px" height="500px" header="Cadastrar Dentista"
widgetVar="dialogCadastrar" modal="true">
<p:panelGrid columns="2" styleClass="semBorda">
<p:commandButton icon="ui-icon-disk" value="Salvar"
actionListener="#{dentistaMB.salvar}"
update=":formDentistas:dataTableDentistas" />
<p:commandButton value="Cancelar" icon="ui-icon-close"
onclick="confirmCancelar.show()" type="button" />
</p:panelGrid>
<p:panelGrid id="panelGridCadastar" styleClass="semBorda"
columns="2">
<h:outputText value="Nome: *" />
<p:inputText id="nome"
value="#{dentistaMB.dentista.pessoaFisica.nome}" size="40"
required="true" requiredMessage="O Nome do Dentista é obrigatório">
</p:inputText>
<h:outputText value="CRO *" />
<p:inputText id="cro" value="#{dentistaMB.dentista.cro}" size="10"
required="true" requiredMessage="O Número do CRO é obrigatório" />
</p:panelGrid>
<p:panelGrid columns="2" styleClass="semBorda">
<p:commandButton icon="ui-icon-disk" value="Salvar"
actionListener="#{dentistaMB.salvar}"
update=":formDentistas:dataTableDentistas" />
<p:commandButton value="Cancelar" icon="ui-icon-close"
onclick="confirmCancelar.show()" />
</p:panelGrid>
<p:confirmDialog id="confirmCancelar" message="Deseja cancelar ?"
showEffect="fade" hideEffect="fade" header="Cancelar"
severity="alert" widgetVar="confirmCancelar" appendToBody="true">
<p:commandButton value="Sim" oncomplete="confirmCancelar.hide()"
actionListener="#{dentistaMB.cancelar}" />
<p:commandButton value="Não" onclick="confirmCancelar.hide()"
type="button" />
</p:confirmDialog>
</p:dialog>
</h:form>
</ui:composition>
</h:body>
</html>
And look at my p:dataTable
<h:form id="formDentistas">
<p:growl autoUpdate="true" id="growlmessages" />
<p:dataTable rowKey="#{dentista.id}" var="dentista" value="#{dentistaMB.dentistas}"
paginator="true" emptyMessage="Não foi encontrado nenhum registro"
rows="10" id="dataTableDentistas"
selection="#{dentistaMB.selectedDentista}" selectionMode="single">
<f:facet name="header">Lista de Dentistas</f:facet>
<p:column headerText="Nome" sortBy="nome" filterBy="nome" id="nome"
width="200px">
#{dentista.pessoaFisica.nome}
</p:column>
<p:column headerText="Data Nascimento" sortBy="dataNascimento"
filterBy="dataNascimento" id="dataNascimento" width="60px">
#{dentista.pessoaFisica.dataNascimento}
</p:column>
<p:column headerText="CRO" sortBy="cro" filterBy="cro" id="cro"
width="60px">
#{dentista.cro}
</p:column>
<f:facet name="footer">
<div class="align_text_left">
<p:commandButton icon="ui-icon-plus" value="Novo" id="cadastrar"
oncomplete="dialogCadastrar.show()" />
<p:column headerText="Ações" style="width:50px;">
<p:commandButton value="Alterar" icon="ui-icon-pencil" />
<p:commandButton value="Remover" icon="ui-icon-trash"
action="#{dentistaMB.deletar}"
update=":formDentistas:dataTableDentistas" />
</p:column>
</div>
</f:facet>
</p:dataTable>
</h:form>
So, what's the correct form to update the p:dataTable after a change in an entity? This example above is about an insert, but remove doesn't work either. I used the following code:
<p:commandButton value="Remover" icon="ui-icon-trash"
action="#{dentistaMB.deletar}"
update=":formDentistas:dataTableDentistas" />
in your dialog you must add an ajax event to fire update of form like:
<p:ajax event="close" listener="#{dentistaMB.load}"
update=":formDentistas" immediate="true" global="false" />
this will allow you to reload your table feed lists.
in your load method you need to update (refetch data from db) dentistas list. If you are using filtering do not forget to update your filtering list as well.
In managedbean load function you can use:
public void load(){
dentistas.clear();
filteredDentistas.clear();
dentistas.addAll(getDentistService().getDentists());
filteredDentistas.addAll(getDentistService().getDentists());
}