p: dialog is not working as expected? - primefaces

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.

Related

p:dataScroller works only for the last element

I am trying to use dataScroller to show elements of a database table. It shows all the elements correctly but when I try to use some actions it only works for the last element like:
<p:commandButton value="vote"
action="#{avisBean.updateAvis(in,email)}">
and
<p:commandButton value="commenter" icon="ui-icon-check"
action="#{avisBean.addAvis(in,email)}">`
and for the others nothings enters to the database just empty string. How can I correct this?
This is the code:
<h:form id="commandLink">
<p:dataScroller value="#{ideeBean.idees}" var="in" chunkSize="10"
mode="inline" scrollHeight="500">
<f:facet name="header">
Les Idées
</f:facet>
<h:panelGrid columns="1" style="width:100%"
columnClasses="logo,detail">
<!-- <p:graphicImage name="demo/images/car/#{car.brand}-big.gif" /> -->
<p:outputPanel>
<h:panelGrid columns="2" cellpadding="5">
<h:outputText value="#{msg['idee.titre']}" />
<h:outputText value="#{in.titre}" style="font-weight: bold" />
<h:outputText value="#{msg['idee.description']}" />
<h:outputText value="#{in.description}"
style="font-weight: bold" />
<h:outputText value="#{msg['idee.theme']}" />
<h:outputText value="#{in.theme}" style="font-weight: bold" />
<h:outputText value="#{msg['idee.type']}" />
<h:outputText value="#{in.type}" style="font-weight: bold" />
<!-- *******************Rating**************** -->
</h:panelGrid>
</p:outputPanel>
<h:panelGrid columns="4" cellpadding="5">
<p:commandButton value="details"
action="details?faces-redirect=true"
actionListener="#{ideeBean.attrListener}">
<f:attribute name="idee" value="#{in}" />
</p:commandButton>
<!--************************************** -->
<p:selectOneMenu id="console" value="#{avisBean.avis.score}"
style="width:125px" converter="javax.faces.Integer">
<f:convertNumber integerOnly="true" />
<f:selectItem itemLabel="Choisir" itemValue="" />
<f:selectItem itemLabel="Horrible" itemValue="1" />
<f:selectItem itemLabel="médiocre" itemValue="2" />
<f:selectItem itemLabel="Bon" itemValue="3" />
<f:selectItem itemLabel="Trés Bon" itemValue="4" />
<f:selectItem itemLabel="Excellent" itemValue="5" />
</p:selectOneMenu>
<p:commandButton value="vote"
action="#{avisBean.updateAvis(in,email)}">
</p:commandButton>
</h:panelGrid>
<!-- ***************************comments******************** -->
<p:dataScroller id="growl"
value="#{ideeBean.getAllAvisList(in.id)}" var="a" chunkSize="2">
<f:facet name="header">
commentaires
</f:facet>
<f:facet name="loader">
<p:commandButton type="button" value="Plus"
icon="ui-icon-circle-triangle-s" />
</f:facet>
<h:panelGrid columns="1">
<!-- <p:graphicImage name="demo/images/car/#{car.brand}-big.gif" /> -->
<p:outputPanel>
<h:panelGrid columns="4" cellpadding="5">
<h:outputText value="#{a.user_avis.nom}" />
<p:inplace id="ajax" editor="true">
<p:ajax event="save" listener="#{avisBean.updateAvis(a)}" />
<h:inputText value="#{a.commentaire}"
style="font-weight: bold" rendered="#{not empty a.commentaire}" />
</p:inplace>
<p:commandButton value="Supprimer"
action="#{ideeBean.deleteAvisById(in.id,a.id)}"
icon="ui-icon-arrowrefresh-1-w"
rendered="#{utilisateurBean.getAllAvis(a,userid)}">
<f:param name="userid" value="#{loginBean.id}"></f:param>
</p:commandButton>
</h:panelGrid>
</p:outputPanel>
</h:panelGrid>
</p:dataScroller>
<!-- ***************************************** -->
<h:panelGrid columns="1">
<p:inputTextarea rows="2" cols="50" id="comment"
value="#{avisBean.avis.commentaire}" />
<p:commandButton value="commenter" icon="ui-icon-check"
action="#{avisBean.addAvis(in,email)}">
<f:param name="email" value="#{loginBean.email}"></f:param>
</p:commandButton>
</h:panelGrid>
<h:panelGrid columns="1" style="width:100%">
<p:graphicImage value="resources/images/separateurr.png" />
</h:panelGrid>
</h:panelGrid>
</p:dataScroller>
</h:form>

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()"/>

update parameter in Java Primefaces

My problem is kinda tricky, I hope u get my explanation, I'll be as clear as I can with this.
I have a DataTable that displays a button to see the activities related with the selected item. this opens a little panel with a menu, that at the moment has only one option. This opens yet another panel with 2 forms, in with I do what I need to.
My problem comes when I use the update parameters to add the info I need into the DB.
this is the code for the button I'm using.
<p:commandLink action="#{reporteConsultorBean.verActividades(lead)}" update=":formMain:panelViewNotas" title="Ver actividades asociadas al Expediente">
<center>
<p:graphicImage value="/images/actividad32.png" />
</center>
</p:commandLink>
this is the dialog that pops out once you clicked the button.
<p:dialog id="idDialogActitividades" header="Actividades del Expediente"
widgetVar="dialogActividades" resizable="true"
showEffect="slide" hideEffect="fade">
<center>
<p:panel header="Actividades del Expediente" >
<p:panelGrid columns="1">
<p:commandLink title="Notas" onclick="dialogNotaView.show(); return false;" style="margin:0 auto">
<center>
<p:graphicImage value="/images/nota.png"/>
</center>
</p:commandLink>
</p:panelGrid>
<br/>
<p:panelGrid columns="1" >
<p:commandLink title="Cerrar" onclick="dialogActividades.hide(); return false;" style="margin:0 auto">
<p:graphicImage value="/images/cerrarBoton.png"/>
</p:commandLink>
</p:panelGrid>
</p:panel>
<br />
</center>
</p:dialog>
and this is the form in which you save the data to de DB.
<p:dialog header="Notas del Expediente" width="950"
widgetVar="dialogNotaView" resizable="true" minWidth="950"
showEffect="slide" hideEffect="fade">
<p:panelGrid columns="2" width="930">
<p:panelGrid columns="1" width="75">
<p:commandLink title="Notas" onclick="return false;" style="margin:0 auto">
<center>
<p:graphicImage value="/images/nota.png"/>
</center>
</p:commandLink>
</p:panelGrid>
<p:panel id="panelViewNotas" header="Notas del Expediente" width="830">
<center>
<h:form id="formNotas">
<p:messages id="messagesNotas" showDetail="true" autoUpdate="true" />
<p:panelGrid id="panelTabNotas" columns="2" width="800">
<f:facet name="header">
Nota
</f:facet>
<p:graphicImage value="/images/nota.png" />
<h:outputText value="Nota" />
<h:outputText value="" />
<h:outputText value="" />
<h:outputText value="Nombre/Tema *" />
<p:inputText value="#{reporteConsultorBean.notaView.nombre}" required="false" requiredMessage="Es necesario que ingrese el asunto"
size="50" maxlength="49" />
<h:outputText value="Descripción *" />
<p:inputTextarea value="#{reporteConsultorBean.notaView.descripcion}" rows="4" cols="65" maxlength="270"
required="false" requiredMessage="Es necesario que ingrese la descripción de la nota." />
</p:panelGrid>
<br/>
<p:panelGrid columns="2" >
<p:commandLink actionListener="#{reporteConsultorBean.saveNota}"
update=":formMain:growl,:formMain:formNotasResult:panelResultadoNotas,:formMain:formNotas:panelTabNotas,:formMain:formNotas:messagesNotas" title="Guardar Nota" style="margin:0 auto" >
<center>
<p:graphicImage value="/images/guardarBoton.png"/>
</center>
</p:commandLink>
<p:commandLink title="Cerrar" onclick="dialogNotaView.hide(); return false;" style="margin:0 auto">
<center>
<p:graphicImage value="/images/cerrarBoton.png"/>
</center>
</p:commandLink>
</p:panelGrid>
</h:form>
<br/>
<p:separator style="width:700px;height:10px" />
<br/>
<h:form id="formNotasResult">
<p:panel id="panelResultadoNotas" header="Notas del Expediente" width="830">
<p:dataTable id="tablaNotasResumen" var="notaResumen"
value="#{reporteConsultorBean.notasExp}" rowKey="#{notaResumen.idNota}"
paginator="true" rows="4" emptyMessage="No hay registros"
selectionMode="single" selection="#{reporteConsultorBean.notaSelected}">
<p:column headerText="Nombre/Asunto">
#{notaResumen.nombre}
</p:column>
<p:column headerText="Descripción"> #{notaResumen.descripcion}
</p:column>
<p:column headerText="Creador">
#{notaResumen.actividad.creador}
</p:column>
<p:column headerText="Fecha Creación">
<h:outputText value="#{notaResumen.actividad.fechaCreacion}">
<f:convertDateTime type="date" pattern="dd-MM-yyyy"/>
</h:outputText>
</p:column>
<p:column>
<p:commandLink title="Editar Nota"
update=":formMain:formNotas:panelTabNotas"
action="#{reporteConsultorBean.editarNota(notaResumen)}">
<p:graphicImage value="/images/editarBoton.png" />
</p:commandLink>
</p:column>
</p:dataTable>
</p:panel>
</h:form>
</center>
<br/>
</p:panel>
my problem comes when I use "panelViewNotas" in the button above. When I use it everything is displayed as it should, but when I hit the "Save" button on the last form, nothing happens (not even a nullPointerException in the Log or Tomcat).
and when I use:
update=":formMain:formNotasResult:panelResultadoNotas,:formMain:formNotas:panelTabNotas"
the data gets stored in the DB with no problem, but the View of the whole thing gets messed up "DialogNotaView" it shows one form in top of the other.
I hope you understand this problem and that u can help me.
How can I fix this problem?

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>

Primefaces Datagrid: Dialog not getting updated with selected values

I have an issue with primefaces datagrid.I am trying to update the dialog box with the selected values on click of p:commandLink.
The Dialog doesnt display any values initially but it gets updated with the previously selected values when i refresh the page and click on commandLink.
I am using primefaces-2.2.1 on JBoss 4.3.0.Any help would be appreciated.
<p:column>
<p:panel header="#{loc.loc_details}" style="text-align:center">
<h:panelGrid columns="1" style="width:100%">
<p:graphicImage value="/user/xyz/resources/images/#{loc.loc_details}.jpg"/>
<h:outputText value="#{loc.locality}" />
<h:outputText value="#{loc.city}" />
<h:outputText value="#{loc.state}" />
<p:commandLink update="locDetail,locDetailGrid" oncomplete="locDialog.show()" title="View Detail" border="0" >
<p:graphicImage value="/user/xyz/resources/images/imagesCA6ETPOM.jpg" />
<f:setPropertyActionListener value="#{loc}"
target="#{tutorialsBean.selectedLocality}" />
</p:commandLink>
</h:panelGrid>
</p:panel>
</p:column>
<p:dialog header="Loc Detail" widgetVar="locDialog" modal="true">
<p:outputPanel id="locDetail" style="text-align:center;" layout="block">
<h:panelGrid id="locDetailGrid" columns="2" cellpadding="5">
<h:outputLabel for="loc_details" value="Locality Details :" />
<h:outputText id="loc_details" value="#{tutorialsBean.selectedLocality.loc_details}" />
<h:outputLabel for="city" value="City: " />
<h:outputText id="city" value="#{tutorialsBean.selectedLocality.city}" />
<h:outputLabel for="state" value="State: " />
<h:outputText id="state" value="#{tutorialsBean.selectedLocality.state}" />
<h:outputText styleClass="text_normal" value="First Name" />
<p:inputText id="fnameText" value="#{tutorialsBean.firstName}" />
<h:outputText styleClass="text_normal" value="Last Name" />
<p:inputText id="lnameText" value="#{tutorialsBean.lastName}" />
<h:outputText styleClass="text_normal" value="Email" />
<p:inputText id="emailText" value="#{tutorialsBean.email}" />
<p:commandButton id="searchButton"
value="Submit" action="#{tutorialsBean.submitValues}"
styleClass="button" />
</h:panelGrid>
</p:outputPanel>
in you commandLink add the update and process attributes in your dialog to refresh the information.
like this:
Put the ID in dialog:
<p:dialog header="Loc Detail" id="locDialog" widgetVar="locDialog" modal="true">
Put the Update to dialog:
<p:commandLink update="locDetail,locDetailGrid" oncomplete="locDialog.show()" title="View Detail" border="0" update="locDialog" process="#this" ajax="true" partialSubmit="true" >
<p:graphicImage value="/user/xyz/resources/images/imagesCA6ETPOM.jpg" />
<f:setPropertyActionListener value="#{loc}" target="#{tutorialsBean.selectedLocality}" />
</p:commandLink>