Primefaces commandButton inside a DataGrid - primefaces

I have a datagrid and its element is a panel and some components including a commandbutton, i load the data from the bean but the actionlistning of the commandbutton is not firing even in eclipse debug mode it does not reach the method.
<p:layout fullPage="true">
<p:layoutUnit header="Islands" position="west" closable="false" collapsed="false" collapsible="true" size="180">
<h:form>
<p:toolbar>
<f:facet name="left"><p:commandButton value="New island" icon="ui-icon-disk"></p:commandButton></f:facet>
</p:toolbar>
<p:dataGrid columns="1" value="#{empcreator.islands}" var="island">
<p:panel header="#{island.name}" style="text-align:center">
<p:toolbar>
<f:facet name="left">
<p:commandButton icon="ui-icon-disk"></p:commandButton>
<p:commandButton icon="ui-icon-trash"></p:commandButton>
</f:facet>
<f:facet name="right">
<p:commandButton value="Load" actionListener="#{empcreator.loadIsland}"></p:commandButton>
</f:facet>
</p:toolbar>
<p:panelGrid columns="2">
<p:outputLabel value="ID"></p:outputLabel>
<p:outputLabel value="#{island.id}"></p:outputLabel>
<p:outputLabel value="X"></p:outputLabel>
<p:outputLabel value="#{island.x}"></p:outputLabel>
<p:outputLabel value="Y"></p:outputLabel>
<p:outputLabel value="#{island.y}"></p:outputLabel>
<p:outputLabel value="Model"></p:outputLabel>
<p:outputLabel value="#{island.model}"></p:outputLabel>
</p:panelGrid>
</p:panel>
</p:dataGrid>
</h:form>
</p:layoutUnit>
<p:layoutUnit position="center" collapsed="false" collapsible="false" id="mainl" >
<div id="cmain" style="padding:0px" onresize="onWindowResize"></div>
</p:layoutUnit>
</p:layout>
is the problem related to the form ?

It should be nested from p:column, it worked fine

Related

Update property doesn't seem to work

I have a datatable with dialog forms nested in a tabView tag....
each row of the datatable has buttons for editing and displaying data in Dialog form...but when i click on the edit or display button, it doesn't fill the form...And i don't know what's wrong with the update property....
I tried also to update the datatable after a create and update process by setting an update property in the forms commanButton but it seems that something is missing...
I also visited this link...update-form-on-hcommandbutton-action
and it doesn't seem to work in my case...maybe because update property is not set corectly.
when i delete the tabView, layout and LayoutUnit tags, it works correctly
Here is my index.xhtml code:
<h:body>
<ui:composition template="/template.xhtml">
<ui:define name="content">
<f:view>
<p:tabView id="tout">
<p:tab title="Identite" id="test">
<p:layout style="min-width:400px;min-height:450px;" id="change">
<p:layoutUnit position="center" id="tester">
/* this Dialog form is for creating a new Antecedent*/
<p:dialog showEffect="drop" hideEffect="drop" id="creation" widgetVar="creation" header="Enregistrer locataire">
<h:form id="creer">
<center>
<p:panelGrid columns="4">
<p:outputLabel value="DateDiagnostic:" for="dateDiagnostic" />
<p:inputText id="dateDiagnostic" value="#{antecedentMBean.antecedent.dateDiagnostic}" title="DateDiagnostic" >
<f:convertDateTime pattern="MM/dd/yyyy HH:mm:ss" />
</p:inputText>
<p:outputLabel value="DateGuerison:" for="dateGuerison" />
<p:inputText id="dateGuerison" value="#{antecedentMBean.antecedent.dateGuerison}" title="DateGuerison" >
<f:convertDateTime pattern="MM/dd/yyyy" />
</p:inputText>
<p:outputLabel value="Allergies:" for="allergies" />
<p:inputText id="allergies" value="#{antecedentMBean.antecedent.allergies}" title="Allergies" />
<p:outputLabel value="Therapie:" for="therapie" />
<p:inputText id="therapie" value="#{antecedentMBean.antecedent.therapie}" title="Therapie" />
</p:panelGrid>
<p:panelGrid columns="1">
<p:outputLabel value="Diagnostique:" for="diagnostique" />
<p:inputTextarea id="diagnostique" value="#{antecedentMBean.antecedent.diagnostique}" title="Diagnostique" autoResize="false" rows="6" cols="83"/>
</p:panelGrid>
<hr/>
</center>
<center>
<p:button icon="fa fa-close" value="Fermer" onclick="PF('creation').hide();
return false" />
<p:commandButton icon="fa fa-trash" id="effacer" value="Effacer" type="reset"/>
<p:commandButton icon="fa fa-save" value="Enregistrer" action="#{antecedentMBean.createAntecedent()}"
update=":formulaire:tbl" oncomplete="PF('creation').hide()" />
</center>
</h:form>
</p:dialog>
<h:form id="formulaire">
/* this Dialog form is for etiting */
<p:dialog showEffect="size" id="modif" hideEffect="size" widgetVar="modif" header="Modification">
<p:outputPanel id="repere" style="text-align:center;">
<center>
<p:panelGrid columns="4">
<p:outputLabel value="DateDiagnostic:" for="dateDiagnostic" />
<p:inputText id="dateDiagnostic" value="#{antecedentMBean.antecedent.dateDiagnostic}" title="DateDiagnostic" >
<f:convertDateTime pattern="MM/dd/yyyy" />
</p:inputText>
<p:outputLabel value="DateGuerison:" for="dateGuerison" />
<p:inputText id="dateGuerison" value="#{antecedentMBean.antecedent.dateGuerison}" title="DateGuerison" >
<f:convertDateTime pattern="MM/dd/yyyy" />
</p:inputText>
<p:outputLabel value="Allergies:" for="allergies" />
<p:inputText id="allergies" value="#{antecedentMBean.antecedent.allergies}" title="Allergies" />
<p:outputLabel value="Therapie:" for="therapie" />
<p:inputText id="therapie" value="#{antecedentMBean.antecedent.therapie}" title="Therapie" />
</p:panelGrid>
<p:panelGrid columns="1">
<p:outputLabel value="Diagnostique:" for="diagnostique" />
<p:inputTextarea id="diagnostique" value="#{antecedentMBean.antecedent.diagnostique}" title="Diagnostique" autoResize="false" rows="6" cols="83"/>
</p:panelGrid>
<hr/>
</center>
<center>
<p:button icon="fa fa-close" value="Fermer" onclick="PF('modif').hide();
return false" />
<p:commandButton icon="fa fa-trash" id="effacer" value="Effacer" type="reset"/>
<p:commandButton icon="fa fa-pencil" value="Modifier" action="#{antecedentMBean.updateAntecedent()}"
update=":formulaire:tbl" onclick="PF('modif').hide()" />
</center>
</p:outputPanel>
</p:dialog>
/* this Dialog form is for displaying a row details */
<p:dialog showEffect="size" hideEffect="size" id="voir" widgetVar="voir" header="Modification">
<p:outputPanel id="view" style="text-align:center;">
<center>
<p:panelGrid columns="4">
<p:outputLabel value="IdAntecedent:"/>
<h:outputText value="#{antecedentMBean.antecedent.idAntecedent}" title="IdAntecedent"/>
<p:outputLabel value="DateDiagnostic:"/>
<h:outputText value="#{antecedentMBean.antecedent.dateDiagnostic}" title="DateDiagnostic">
<f:convertDateTime pattern="MM/dd/yyyy HH:mm:ss" />
</h:outputText>
<p:outputLabel value="DateGuerison:"/>
<h:outputText value="#{antecedentMBean.antecedent.dateGuerison}" title="DateGuerison">
<f:convertDateTime pattern="MM/dd/yyyy HH:mm:ss" />
</h:outputText>
<p:outputLabel value="Allergies:"/>
<h:outputText value="#{antecedentMBean.antecedent.allergies}" title="Allergies"/>
<p:outputLabel value="Therapie:"/>
<h:outputText value="#{antecedentMBean.antecedent.therapie}" title="Therapie"/>
<p:outputLabel value="Diagnostique:"/>
<h:outputText value="#{antecedentMBean.antecedent.diagnostique}" title="Diagnostique"/>
<p:outputLabel value="CreerPar:"/>
<h:outputText value="#{antecedentMBean.antecedent.creerPar}" title="CreerPar"/>
<p:outputLabel
<p:outputLabel value="DateCreer:"/>
<h:outputText value="#{antecedentMBean.antecedent.dateCreer}" title="DateCreer">
<f:convertDateTime pattern="MM/dd/yyyy HH:mm:ss" />
</h:outputText>
<p:outputLabel value="MajPar:"/>
<h:outputText value="#{antecedentMBean.antecedent.majPar}" title="MajPar"/>
<p:outputLabel value="DateMaj:"/>
<h:outputText value="#{antecedentMBean.antecedent.dateMaj}" title="DateMaj">
<f:convertDateTime pattern="MM/dd/yyyy HH:mm:ss" />
</h:outputText>
<p:outputLabel value="IdPatient:"/>
<h:outputText value="#{antecedentMBean.antecedent.idPatient.prenom}" title="IdPatient"/>
</p:panelGrid>
<hr/>
</center>
<p:button icon="fa fa-close" value="Fermer" onclick="PF('voir').hide();
return false" />
</p:outputPanel>
</p:dialog>
/* this commandButton display the create form */
<p:commandButton icon="fa fa-plus" value="Creer"
onclick="PF('creation').show()"/>
/* Here is my dataTable */
<p:dataTable id="tbl" value="#{antecedentMBean.listAllAntecedents()}" var="item"
emptyMessage="Aucun Antecedent trouvee" widgetVar="AntecedentTable"
paginator="true" paginatorTemplate="{CurrentPageReport}
{FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink}
{LastPageLink} {RowsPerPageDropdown} " paginatorPosition="top" rowsPerPageTemplate="5,10"
>
<f:facet name="header">
Liste des Patients
</f:facet>
<p:column>
<f:facet name="header">
<h:outputText value="IdAntecedent"/>
</f:facet>
<h:outputText value="#{item.idAntecedent}"/>
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="DateDiagnostic"/>
</f:facet>
<h:outputText value="#{item.dateDiagnostic}">
<f:convertDateTime pattern="MM/dd/yyyy HH:mm:ss" />
</h:outputText>
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="DateGuerison"/>
</f:facet>
<h:outputText value="#{item.dateGuerison}">
<f:convertDateTime pattern="MM/dd/yyyy HH:mm:ss" />
</h:outputText>
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Allergies"/>
</f:facet>
<h:outputText value="#{item.allergies}"/>
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Therapie"/>
</f:facet>
<h:outputText value="#{item.therapie}"/>
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Diagnostique"/>
</f:facet>
<h:outputText value="#{item.diagnostique}"/>
</p:column>
<p:column headerText="Action" style="width:18%" exportable="false">
<div class="ui-g">
<div class="ui-g-4">
/* Here are the buttons for editing*/
<p:commandButton icon="fa fa-pencil" update=":formulaire:repere" oncomplete="PF('modif').show()">
<f:setPropertyActionListener value="#{item}" target="#{antecedentMBean.antecedent}" />
</p:commandButton>
</div>
<div class="ui-g-4">
/* Here are the buttons for deleting*/
<p:commandButton icon="fa fa-trash" style="background-color: red" type="button" onclick="PF('cd').show()" />
<p:confirmDialog message="Voulez vous vraiment supprimer cet enregistrer?"
header="Suppression en cours" severity="alert"
widgetVar="cd" global="true" showEffect="bounce" hideEffect="bounce">
<p:commandButton value="Oui" action="#{antecedentMBean.deleteAntecedent()}"
oncomplete="PF('cd').hide()" icon="ui-icon-check">
<f:setPropertyActionListener target="#{antecedentMBean.antecedent}" value="#{item}"/>
</p:commandButton>
<p:commandButton value="Non" onclick="PF('cd').hide();" type="button" icon="ui-icon-close"/>
</p:confirmDialog>
</div>
<div class="ui-g-4">
/* Here are the buttons for displaying*/
<p:commandButton icon="fa fa-binoculars" update=":formulaire:view" oncomplete="PF('voir').show()">
<f:setPropertyActionListener value="#{item}" target="#{antecedentMBean.antecedent}" />
</p:commandButton>
</div>
</div>
</p:column>
</p:dataTable>
</h:form>
</p:layoutUnit>
</p:layout>
</p:tab>
</p:tabView>
</f:view>
</ui:define>
</ui:composition>
</h:body>
An here is my managedbean:
package managedbeans;
import entities.Operation;
import java.io.Serializable;
import java.util.Date;
import java.util.List;
import javax.ejb.EJB;
import javax.inject.Named;
import javax.faces.view.ViewScoped;
import sessions.OperationFacadeLocal;
Named(value = "operationMBean")
#ViewScoped
public class OperationMBean implements Serializable{
#EJB
private OperationFacadeLocal operationFacade;
private List<Operation> operationList;
private Operation operation;
private Date date = new Date();
public OperationFacadeLocal getOperationFacade() {
return operationFacade;
}
public void setOperationFacade(OperationFacadeLocal operationFacade) {
this.operationFacade = operationFacade;
}
public List<Operation> getOperationList() {
return operationList;
}
public void setOperationList(List<Operation> operationList) {
this.operationList = operationList;
}
public Operation getOperation() {
return operation;
}
public void setOperation(Operation operation) {
this.operation = operation;
}
public Date getDate() {
return date;
}
public void setDate(Date date) {
this.date = date;
}
public List<Operation> createOperation(){
operation.setDateCree(getDate());
operation.setDateMaj(getDate());
operationFacade.create(operation);
operationList = operationFacade.findAll();
return operationList;
}
public List<Operation> updateOperation(){
operation.setDateMaj(getDate());
operationFacade.edit(operation);
operationList = operationFacade.findAll();
return operationList;
}
public List<Operation> deleteOperation(){
operationFacade.remove(operation);
operationList = operationFacade.findAll();
return operationList;
}
/**
* Creates a new instance of OperationMBean
*/
public OperationMBean() {
}
}
I'm using PrimeFaces 6.1 Netbeans 8.2 Glassfish 4.1
Hope i've been clear in my question
Thanks in advance!!!
I solve this problem by using WidgetVar instead of id in the update property like this:
<p:commandButton update="widgetVar(element_widgetVar)" />
Thanks to Stackoverflow

p: dialog is not working as expected?

i have two p:commandLink:
<p:commandLink update=":form:livreDetail" oncomplete="PF('livreDialog').show()" title="View Detail">
<h:outputText styleClass="ui-icon ui-icon-search" style="margin:0 auto;" />
<f:setPropertyActionListener value="#{livre}" target="#{livreDataGridView.selectedLivre}" />
</p:commandLink>
<p:commandLink update=":form:ajoutPanel" oncomplete="if(#{ empty loginBean.c }){PF('connectDialog').show()}else {PF('ajoutLivrePanier').show()} " title="ajouter au panier">
<h:outputText styleClass="ui-icon ui-icon-cart" style="margin:0 auto;" />
<f:setPropertyActionListener value="#{livre}" target="#{livreDataGridView.selectedLivre}" />
</p:commandLink>
The first p:commandLink one is showing and updating the content of livreDialog p:dialog.
The second p:commandLink should show connectDialog p:dialog when loginBean.c property is null, and ajoutLivrePanier p:dialog when is not.
my code works correctly when the loginBean property is null. But when is not it gives strange results:
When i click the first p:commandLink it only shows the livreDialog p:dialog without updating it's content. Also the validation message of the connectDialog p:dialog is shown up. it is weird !!
When i click the second p:commandLink only the validation message of connectDialog p:dialog is shown up, Weird too !!
Here is the hole code:
<p:messages globalOnly="true" autoUpdate="true" showDetail="false"/>
<h:form id="form">
<p:dataGrid var="livre" value="#{livreListBean.livresList}" columns="3"
rows="12" paginator="true" id="livres"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
rowsPerPageTemplate="6,12,16">
<f:facet name="header">
Livres
</f:facet>
<p:panel header="#{livre.titre}" style="text-align:center">
<h:panelGrid columns="1" style="width:100%">
<h:outputText value="#{livre.auteur}" />
<h:outputText value="#{livre.datePublication}" />
<p:commandLink update=":form:livreDetail" oncomplete="PF('livreDialog').show()" title="View Detail">
<h:outputText styleClass="ui-icon ui-icon-search" style="margin:0 auto;" />
<f:setPropertyActionListener value="#{livre}" target="#{livreDataGridView.selectedLivre}" />
</p:commandLink>
<p:commandLink update=":form:ajoutPanel" oncomplete="if(#{ empty loginBean.c }){PF('connectDialog').show()}else {PF('ajoutLivrePanier').show()} " title="ajouter au panier">
<h:outputText styleClass="ui-icon ui-icon-cart" style="margin:0 auto;" />
<f:setPropertyActionListener value="#{livre}" target="#{livreDataGridView.selectedLivre}" />
</p:commandLink>
</h:panelGrid>
</p:panel>
</p:dataGrid>
<p:dialog header="Info Livre" widgetVar="livreDialog" modal="true" showEffect="fade" hideEffect="fade" resizable="false">
<p:outputPanel id="livreDetail" style="text-align:center;">
<p:panelGrid columns="2" rendered="#{not empty livreDataGridView.selectedLivre}" columnClasses="label,value">
<h:outputText value="Titre:" />
<h:outputText value="#{livreDataGridView.selectedLivre.titre}" />
<h:outputText value="Auteur" />
<h:outputText value="#{livreDataGridView.selectedLivre.auteur}" />
<h:outputText value="Date de publication:" />
<h:outputText value="#{livreDataGridView.selectedLivre.datePublication}" />
<h:outputText value="Prix" />
<h:outputText value="$#{livreDataGridView.selectedLivre.prix}" />
</p:panelGrid>
</p:outputPanel>
</p:dialog>
<h:panelGroup id="livrePanier">
<p:dialog header="Se connecter" widgetVar="connectDialog" modal="true" showEffect="fade" hideEffect="fade" resizable="false">
<p:outputPanel id="connecterPanel" style="text-align:center;">
<h:panelGrid columns="3" >
<p:outputLabel for="mail" value="E-mail:" />
<p:inputText id="mail" value="#{loginBean.email}" required="true" requiredMessage="Vous devez entrer votre e-mail"/>
<p:message for="mail"/>
<p:outputLabel for="password" value="Password:" />
<p:password id="password" value="#{loginBean.password}" required="true" requiredMessage="Vous devez entrer votre password"/>
<p:message for="password"/>
<p:commandButton value="Se connecter" action="#{loginBean.LoginProcess()}" process="connecterPanel" update="connecterPanel"/>
</h:panelGrid>
</p:outputPanel>
</p:dialog>
<p:dialog header="Ajouter au panier" widgetVar="ajoutLivrePanier" modal="true" showEffect="fade" hideEffect="fade" resizable="false">
<p:outputPanel id="ajoutPanel" style="text-align:center;" rendered="#{not empty livreDataGridView.selectedLivre}">
<p:outputLabel value="Voulez vous ajouter ce produit au panier ?"/>
<h:panelGrid columns="2" >
<p:outputLabel value="#{livreDataGridView.selectedLivre.titre}" />
<p:outputLabel value="#{livreDataGridView.selectedLivre.prix}" />
<p:commandButton value="Oui" action="#{livreDataGridView.ajouterLivreAuPanier()}" process="connecterPanel" update="connecterPanel" oncomplete="PF('ajoutLivrePanier').hide()"/>
<p:commandButton value="Annuler" onclick="PF('ajoutLivrePanier').hide()"/>
</h:panelGrid>
</p:outputPanel>
</p:dialog>
</h:panelGroup>
</h:form>
i'll appreciate your help to fix the problem
You need process="#this" on your commandLinks. Without it JSF processes the whole form, that's why you see those validation failures, which in turn cause the Invoke Application phase to be skipped.
See also: Understanding PrimeFaces process/update and JSF f:ajax execute/render attributes.

CommandButton Onclick inside tab always takes me to first tab Primefaces

Below is my code. Here the CommandButton action is not working and always moving the first
tab.
<h:head>
<title>Alert Input</title>
</h:head>
<h:body>
<h1 style="margin: auto;text-align: center">Fraud Alert Admin Page</h1>
<p:separator style="height:5px;background-color:black;"/>
<p:tabView id="tabs">
<p:tab id="alertInput" title="Enter Alert">
<h:form>
<p:growl id="submitMessage" showDetail="true" sticky="true"/>
<p:panel id="alertPanel">
<p:panelGrid columns="2" style="margin-bottom:10px">
<p:outputLabel for="sevLevel" value="Sev:" />
<p:selectOneMenu id="sevLevel" required="true" value="#{alertInputBean.alertSev}">
<f:selectItem itemLabel="Informational" itemValue="1"/>
<f:selectItem itemLabel="Warning" itemValue="2"/>
<f:selectItem itemLabel="Urgent" itemValue="3"/>
<f:selectItem itemLabel="Severe" itemValue="4"/>
</p:selectOneMenu>
<p:outputLabel for="alertName" value="Alert Name:"/>
<p:inputText id="alertName" required="true" label="Alert Name" value="#{alertInputBean.alertName}"/>
<p:outputLabel for="alertDescription" value="Alert Description:"/>
<p:inputText id="alertDescription" required="true" label="Description" value="#{alertInputBean.alertDesc}"/>
</p:panelGrid>
<p:toolbar>
<f:facet name="left">
<p:commandButton value="submit" actionListener="#{alertInputBean.submitAlert()}"
update="submitMessage" ajax="false">
</p:commandButton>
</f:facet>
<f:facet name="right">
<h:commandButton value="Reset">
<p:ajax update="alertPanel" resetValues="true"/>
</h:commandButton>
</f:facet>
</p:toolbar>
</p:panel>
</h:form>
</p:tab>
<p:tab id="alertExisting" title="Current Alerts">
<h:form id="form">
<p:dataTable id="allAlerts" var="alerts"
value="#{alertInputBean.retrieveAllAlerts()}"
emptyMessage="No alerts found with the given criteria."
selection="#{alertInputBean.selectedAlerts}"
rowKey="#{alerts.alertName}" scrollable="true" scrollHeight="250">
<f:facet name="header">
Current Alerts
</f:facet>
<p:column selectionMode="multiple" style="width:16px;text-align:center"/>
<p:column headerText="Alert Severity">
<h:outputText value="#{alerts.sev}"/>
</p:column>
<p:column headerText="Alert Name">
<h:outputText value="#{alerts.alertName}"/>
</p:column>
<p:column headerText="Alert Description">
<h:outputText value="#{alerts.descrption}"/>
</p:column>
<p:column headerText="Creation Date">
<h:outputText value="#{alerts.createDate}"/>
</p:column>
<p:column headerText="Modify Date">
<h:outputText value="#{alerts.modifyDate}"/>
</p:column>
<p:column headerText="Enabled">
<h:outputText value="#{alerts.enabled}"/>
</p:column>
<f:facet name="footer">
<p:commandButton process="#this" value="Update" icon="ui-icon-search"
update=":tabs:form:multiAlertUpdate" onclick="PF('multiAlertDialog')show()"/>
</f:facet>
</p:dataTable>
<p:dialog header="Update Selected" widgetVar="multiAlertDialog" modal="true" showEffect="fade" hideEffect="fade" resizable="false" width="200">
<p:outputPanel id="multiAlertUpdate" style="text-align: center">
<ui:repeat value="#{alertInputBean.selectedAlerts}" var="sAlerts">
<p:outputLabel value="#{sAlerts.sev}-#{sAlerts.alertName}" style="display: block"/>
</ui:repeat>
</p:outputPanel>
</p:dialog>
</h:form>
</p:tab>
</p:tabView>
</h:body>
Below is the XHTML
I have the above code. The problem is whenever I click on the commandbutton I am redirected to the first tab. Intended onClick is not at all working.
First Command Button
It happens because you have defined the ajax attribute as false, and you are trying to call a method with actionListener which uses an ajax call.
Set ajax=true or just delete it (the default is true), and your page may work
If you don't want ajax behavior, use action instead of actionListener
Last Command Button
If the problem is in the last command button (please be more clear in the next time), you just have to define type=button, so it will work as a simple button.
<p:commandButton type="button" process="#this" value="Update" icon="ui-icon-search"
update=":tabs:form:multiAlertUpdate" onclick="PF('multiAlertDialog')show()"/>

Primefaces p:dialog modal="true" appendToBody it´s not working

I tried many things for this workaround, but now I found a issue with p:dialog.
If I use modal="false" everything works fine.
But if I use modal="true" and appendTo="#(body)" and want to use a footer the p:dialog doesnt work.
The h:form doesn´t validate the fields.
<p:dialog message="Add Ticket" header="Add Ticket"
draggable="true" resizable="true" closeOnEscape="true"
appendTo="#(body)" modal="true" widgetVar="addTicketReportingDialog">
<h:form id="addTicketReportingForm">
<h:panelGrid id="ticketReportingAddPanelGrid" columns="2">
<p:outputLabel for="ticketReporting_name" value="Name:" />
<p:inputText id="ticketReporting_name" size="33" required="true"
requiredMessage="Please add a value"
value="#{ticketReportingEditController.ticketReporting.title}" />
</h:panelGrid>
<br></br>
<f:facet name="footer">
<p:commandButton value="Save"
oncomplete="if (!args.validationFailed) addTicketReportingDialog.hide()"
update=":ticketReportingListForm:ticketReportingListDatatable,messagesAddTicketReporting,:addTicketReportingForm:ticketReportingAddPanelGrid"
actionListener="#{ticketReportingEditController.doSave}"
ajax="true" />
<h:outputText value=" or " />
<p:commandLink ajax="true" process="#this"
onclick="addTicketReportingDialog.hide();">
<h:outputText value="Close" />
</p:commandLink>
<p:messages id="messagesAddTicketReporting" showDetail="false"
for="messagesAddTicketReporting" autoUpdate="false"
closable="true" />
</f:facet>
</h:form>
</p:dialog>

can"t refresh form or page after row update in editable p:dataTable

I have a strange behavior with rowEdit of dataTable. when I modify a row of the table the row is modified successfully, but I can not refresh the form or the page, I tried the solution
<p:ajax event="rowEdit" update="#form" listener="#{pecBean.onEdit}"/>
result: the form is not completely displayed. then I tried
<p:ajax event="rowEdit" update="#all" listener="#{pecBean.onEdit}"/>
result: the page is not fully refreshed
below the full source 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:composite="http://java.sun.com/jsf/composite"
xmlns:p="http://primefaces.org/ui"
xmlns:c="http://java.sun.com/jsp/jstl/core">
<h:head>
<title>(For validation only)</title>
<link href="./css/styles.css" rel="stylesheet" type="text/css" />
</h:head>
<body class="bodyMain">
<composite:interface />
<composite:implementation>
<h:form id="form" prependId="false">
<h:panelGrid>
<h:panelGrid id="recapActes">
<h:panelGrid>
<p:panel id="recapGlobale" header="Récap globale Prise en charge">
<h:panelGrid>
<h:panelGrid columns="4">
<h:outputText styleClass="lib" value="Total PEC Base" />
<h:outputText styleClass="valeur"
value="#{pecBean.recapPec.totalRemboursementBase}">
</h:outputText>
<h:outputText styleClass="lib" value="Total PEC complémentaire" />
<h:outputText styleClass="valeur"
value="#{pecBean.recapPec.totalRemboursementComplementaire}">
</h:outputText>
</h:panelGrid>
</h:panelGrid>
</p:panel>
</h:panelGrid>
<h:panelGrid>
<p:dataTable sortBy="#{am.acte.categorieActe.code}"
editable="true" rowKey="#{am.idActePec}"
value="#{pecBean.actesPec}" var="am">
<p:ajax event="rowEdit" update="#all"
listener="#{pecBean.onEdit}" />
<p:column>
<f:facet name="header">Code acte</f:facet>
#{am.acte.code}
</p:column>
<p:column styleClass="bla">
<f:facet name="header">Lib acte</f:facet>
#{am.acte.libelle}
</p:column>
<p:column>
<f:facet name="header">Coefficient</f:facet>
#{am.coefficientActe}
</p:column>
<p:column>
<f:facet name="header">Quantité souscrite</f:facet>
#{am.quantiteActeSouscrit}
</p:column>
<p:column>
<f:facet name="header">Quantité accordée</f:facet>
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{am.quantiteActeAccorde}" />
</f:facet>
<f:facet name="input">
<h:inputText value="#{am.quantiteActeAccorde}" required="true" />
</f:facet>
</p:cellEditor>
</p:column>
<p:column>
<f:facet name="header">Observation</f:facet>
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{am.observation}" />
</f:facet>
<f:facet name="input">
<h:inputTextarea value="#{am.observation}" />
</f:facet>
</p:cellEditor>
</p:column>
<p:column>
<f:facet name="header">Pec Base</f:facet>
<h:outputText value="#{am.rembBase}">
</h:outputText>
</p:column>
<p:column style="text-align:right">
<f:facet name="header">Pec Compl</f:facet>
<h:outputText
value="#{am.rembComplementaire}">
</h:outputText>
</p:column>
<p:column>
<p:rowEditor />
</p:column>
</p:dataTable>
</h:panelGrid>
</h:panelGrid>
</h:panelGrid>
</h:form>
</composite:implementation>
</body>
</html>
thanks for any help.