To display validation message in primefaces dialog from managed bean - jsf-2

i am trying to display the message of the outcome of a validation done in managed bean in the dialog but it is not getting displayed in the dialog on submit of the form.
Please help me in fixing this
My JSF page snippet with dialog
<p:dialog header="Add LPC" id="lpcDlg" widgetVar="dlg" rendered="true"
appendToBody="true" resizable="true" modal="true" height="320px"
width="38%">
<h:form id="addLpc">
<div align="center" style="margin-bottom: 1px; padding-bottom: 1px;">
<h:outputLabel value="Add New LPC"
style="font-color:#000000;font-weight:bold;font-size:24px;padding-bottom:1px;"></h:outputLabel>
</div>
<div align="center">
<p:messages id="lpcDlgMsg" showDetail="false" autoUpdate="true"
closable="true" />
<p:messages id="lpcDlgMsg2" for="lpcDlgMessage" showDetail="false"
autoUpdate="true" closable="true" />
<h:panelGrid id="addLpcForm" columns="2" appendToBody="true">
<h:outputText value="LPC ID" />
<p:inputText id="lpcId" value="#{lpcBean.lpcId}" required="true"
requiredMessage="LPC ID is required">
<f:ajax event="blur" render="lpcDlgMsg" />
</p:inputText>
<h:outputText value="First Name" />
<p:inputText id="firstName" value="#{lpcBean.firstName}" />
.
.
.
.
</h:panelGrid>
</div>
<div align="center">
<p:commandButton id="submitButton" value="Submit" ajax="true"
update=":lpcForm:lpcDataTable,addLpc"
action="#{lpcBean.formSubmit}" oncomplete="dlg.hide()" />
<p:commandButton id="cancelButton" value="Cancel"
onclick="dlg.hide()" />
</div>
</h:form>
</p:dialog>
message with id lpcDlgMsg2 is the message i am trying to display on submit.The other message is getting displayed correct on blur.
Snippet of the method that is called on submit
public void formSubmit()
{
if(resultSet.next())
{
int lpcIdCount=rs.getInt("lpcCount");
if(lpcIdCount!=0)
{
FacesContext.getCurrentInstance().addMessage("lpcDlgMessage", new FacesMessage(FacesMessage.SEVERITY_ERROR," ", "Duplicate LPCID"));
System.out.println("after display");
}
else
{
.
.
.
.
}
}
}
}

Here is my suggestion:
<p:dialog header="Add LPC" id="lpcDlg" widgetVar="dlg" rendered="true"
appendToBody="true" resizable="true" modal="true" height="320px"
width="38%">
<h:form id="addLpc">
<div align="center">
<p:messages id="lpcDlgMsg" showDetail="false" autoUpdate="true"
closable="true" />
<h:panelGrid id="addLpcForm" columns="2" >
<h:outputText value="LPC ID" />
<p:inputText id="lpcId" required="true" />
<h:outputText value="First Name" />
<p:inputText id="firstName" required="true" />
</h:panelGrid>
</div>
<div align="center">
<p:commandButton id="submitButton" value="Submit"
oncomplete="if (!args.validationFailed){dlg.hide();}" />
<p:commandButton id="cancelButton" value="Cancel"
onclick="dlg.hide()" />
</div>
</h:form>
</p:dialog>
Note that I've simplified your code in order to avoid using a managedbean.
If you want your managed bean to perform the validation, use RequestContext to conditionally execute the code that will close the dialog and remove the oncomplete from Submit button.
if (success) {
RequestContext.getCurrentInstance().execute("dlg.hide()");
}else{
//show all the messages you need here
}

You have to add this javascript first inside head tag
function handleComplete(xhr, status, args) {
if (!args.validationFailed) {
dlg.hide();
} else {
}
}
More changes are
<p:commandButton id="submitButton" value="Submit" ajax="true"
update=":lpcForm:lpcDataTable,addLpc :lpcDlgMsg2"
actionListener="#{lpcBean.formSubmit}" oncomplete="handleComplete(xhr, status, args)" />
action to actionListener because action has String return type.
This will work fine.

Related

p:commandButton p:confirm actionListener not triggering

Primefaces actionListener is not working in p:confirmDialog . Can someone help? The saveRecord works fine in a simple dialog box.
<p:commandButton value="Save" actionListener="#{EmployeeDetailsComponent.displayInfo}">
<p:confirm header="Attention" message="test" icon="ui-icon-alert" />
</p:commandButton>
<p:confirmDialog global="true" showEffect="fade" hideEffect="explode" appendToBody="true">
<p:commandButton value="Save" action="#{TestComponent.saveRecord(TestComponent.testData)}" styleClass="ui-confirmdialog-yes" icon="ui-icon-check" />
<p:commandButton value="Cancel" type="button" styleClass="ui-confirmdialog-no" icon="ui-icon-close" />
</p:confirmDialog>
You have appendToBody="true", which means there is no <h:form> to handle the click because the whole dialog content is moved directly under body. Just add the form inside the dialog.
<p:confirmDialog global="true" showEffect="fade" hideEffect="explode" appendToBody="true">
<h:form>
<p:commandButton value="Save" action="#{TestComponent.saveRecord(TestComponent.testData)}" styleClass="ui-confirmdialog-yes" icon="ui-icon-check" />
<p:commandButton value="Cancel" type="button" styleClass="ui-confirmdialog-no" icon="ui-icon-close" />
</h:form>
</p:confirmDialog>
I just add a div to center the buttons and the process and the action works perfectly, example code with primefaces 5.1:
<p:confirmDialog global="true" showEffect="clip" >
<div align="center">
<p:commandButton value="Aceptar" actionListener="#{bienvenidoUI.asignarPSI()}" update="tablaProceso" icon="ui-icon-check" process="#this" styleClass="ui-confirmdialog-yes"/>
<p:commandButton value="No" type="button" styleClass="ui-confirmdialog-no" icon="ui-icon-close" />
</div>
</p:confirmDialog>
and I just call the confirmDialog from inside a table with:
<p:commandButton icon="ui-icon-circle-check" title="Asignar PSI" rendered="#{bienvenidoUI.usr.idUsuario==bienvenidoUI.autorizadorId and min.estado.descripcion=='Proceso'}">
<f:setPropertyActionListener value="#{min}" target="#{bienvenidoUI.minutaSelected}" />
<p:confirm header="Confirmación" message="Esta seguro que desea asignar psi?" icon="ui-icon-alert" />
</p:commandButton>
remove appendToBody="true" from the confirm dialog component and enclose Save command buttton with in form.
<!DOCTYPE html>
<f:view 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">
<html lang="en">
<h:head>
</h:head>
<h:body id="top">
<h:form>
<p:commandButton value="Save" actionListener="#{simpleBean.displayInfo}" action="#{simpleBean.saveRecord}">
<p:confirm header="Attention" message="test" icon="ui-icon-alert" />
</p:commandButton>
</h:form>
<p:confirmDialog closeOnEscape="true" global="true" showEffect="fade" hideEffect="explode">
<p:commandButton value="Save" type="button" styleClass="ui-confirmdialog-yes"/>
<p:commandButton value="Cancel" type="button" styleClass="ui-confirmdialog-no"/>
</p:confirmDialog>
</h:body>
</html>
</f:view>
SimpleBean.java
#Named("simpleBean")
public class SimpleBean implements Serializable{
public void displayInfo(){
Logger.getLogger(this.getClass().getName()).log(Level.INFO, "Display Info works");
}
public String saveRecord(){
Logger.getLogger(this.getClass().getName()).log(Level.INFO, "Save Record works");
return null;
}
}

add message to growl message componnent in primefaces

hello i have a jsf page it contains a message and a i want add message only to the growl message and it does not work for me :
my java code is :
public class EtudeBean {
privaezte loneeg lotiezeffhssemgefntI12Etude;
public EtudeeBffeeezan() {
eteude = new Eeezteeeude();
}
public Lotisseezement trouvezeerLoezezeztissement() {
ez
retureezn lotisszefdgemezeeeeezezntServiezezceImpl.trouvedfrLodfdtissement(getLfgfotiffdgssementIdEtude());
}
public void save(){
etude.setDesignation(model.getDesignation());
etude.setDescription(model.getDescription());
etude.setCout(mezezodel.getCout());
etude.setDeezezateezezezRealisation(model.getDateRealisation());
eez
etude.setLotissement(model.getLotis());
etuezezezde.setIdEtude(model.getIdEtude());
etudeSezeezezrviceImpl.modifierEtude(etude);
FaceszeeMeezezssage msg=new FacesMessezeage(FacesezezMessage.SEeezVERITY_INFO,"Etude"+etude.getDesignation()+"modifiée avec succes","Mot de passe ancienne non valide: ");
FacesContext.getCurrentInstance().addMessage("growl",msg);
}
}
and the code of my jsf page :
<h:form id="form" prependId="false">
<p:growl for="growl" id="idgrowl"/>
<p:panel id="panel"
header="New Etude for lotissment: #{etudeBedfsdsan.trouvedfssrLotissemdfent().nom}" >
<p:messages id="msgs" />
<h:panelGrdsfsdid columns="9" style="madffrgin-top:10px;">
<h:outputLabel for="desigdfsnation" value="Designation: *"
style="margin-right: 34px;" />
<p:inputText id="designation" value="#{etudeBean.model.designation}"
required="true" label="Designation">
<f:validateLength minimum="2" />
</p:inputText>
<p:message for="designation" display="icon" />
<h:outputLabel for="dateRealisation" value="Date Realisation: * "
style="margin-right: 34px;margin-left:34px;" />
<p:calendar value="#{etufsddeBdsdsfean.model.dateRealisation}"
pattern="dd.MM.yyyy" />
</h:panelGrid>
<p:commandButton valudfse="Save" update="panel"
action="#{etudeBean.save()}" />
</p:panel>
</h:form>
have one any idea please help me and thank you very much
You have to add the growl to the update attribute of your commandButton, aswell.
Like this:
<p:growl id="idgrowl"/>
...
<p:commandButton value="Save" update="growl" action="#{etudeBean.save()}" />
And in your managed bean add the FacesMessage the following way:
FacesMessage msg = new FacesMessage(FacesMessage.SEVERITY_INFO,"Etude"+etude.getDesignation()+"modifiée avec succes","Mot de passe ancienne non valide: ");
FacesContext.getCurrentInstance().addMessage(null,msg);
This should work.

Cursor does not appear to set the focus on a inputext after a request

When informing the enrollment of an employee who is not registered in the given database
the system issues an error and inputText component loses focus.
After a few attempts the component gets the focus but the cursor does not appear in the field.
<h:form id="findForm">
<!-- Other -->
<p:dialog id="mealRegisterDialog" widgetVar="mealRegisterDialog"
header="#{lbl['mealRegisterControl']}" appendToBody="true"
resizable="false" closable="true" width="100%" height="600"
styleClass="container_24 clearfix grid_24">
<h:form id="mealRegisterForm"
styleClass="container_24 clearfix grid_24">
<p:messages id="dialogMessages" closable="true" />
<div class="grid_24"
style="border: 1; border-color: gray; border-style: solid; font-size: 20px">
<p:outputLabel value="#{lbl['employee']}" styleClass="grid_3"
style="margin-top:5px;" />
<p:inputText id="employeeRegistrationInput"
widgetVar="employeeRegistrationInput"
value="#{mealFindController.employeeRegistration}"
styleClass="grid_21">
<f:convertNumber integerOnly="true" />
<p:focus for="employeeRegistrationInput"
rendered="if(document.getElementById('mealRegisterTabView:findForm:confirmDialogUser').visible)" />
<p:ajax event="change" process="#form employeeRegistrationInput"
update="#form dialogMessages"
oncomplete="setFocusRegistration();"
listener="#{mealFindController.loadDataEmployee}" />
</p:inputText>
</div>
</h:form>
</p:dialog>
<!-- Other -->
</h:form>
function setFocusRegistration() {
employeeRegistrationInput.jq.focus();
}
RequestContext.getCurrentInstance().execute( "focus(employeeRegistrationInput)" );

update entity attribute through primefaces modal

Try to load and update attributes from a datatable to a form embedded in a primefaces modal box:
1) The datatable command to send user's data to the modal
<p:commandButton value="alterar"
action="#{usuarioMB.carregarAlteracao(u)}" update=":usuarioDesc"
process="#this" onclick="dlg.show();" />
2) It loads well the user's attributes in the modal box
<p:dialog id="modalDialog" header="Alterar Usuário" widgetVar="dlg"
modal="true" height="260" appendToBody="true" dynamic="true" >
<h:form id="usuarioDesc" styleClass="formTamanho">
<h:panelGrid id="#{msg.pnlIdProfile}" columns="2"
columnClasses="labelPanelGrid, contentPanelgrid">
<p:outputLabel value="Perfil:" />
<p:outputLabel value="#{usuarioMB.usuario.perfil.nome}" />
</h:panelGrid>
<h:panelGrid id="#{msg.pnlIdLogin}" columns="2"
columnClasses="labelPanelGrid, contentPanelgrid">
<p:outputLabel value="#{msg.lblLogin}" for="usuario_login" />
<p:inputText value="#{usuarioMB.usuario.login}" id="usuario_login"
required="true" requiredMessage="#{msg.msgReqLogin}" />
</h:panelGrid>
<h:panelGrid id="nomeUsuario" columns="2"
columnClasses="labelPanelGrid, contentPanelgrid">
<p:outputLabel value="Nome:" for="usuario_nome" />
<p:inputText value="#{usuarioMB.usuario.nome}" id="usuario_nome"
required="true" />
</h:panelGrid>
<h:panelGrid id="emailUsuario" columns="2"
columnClasses="labelPanelGrid, contentPanelgrid">
<p:outputLabel value="Email:" for="usuario_email" />
<p:inputText value="#{usuarioMB.usuario.email}" id="usuario_email"
required="false" />
</h:panelGrid>
<h:panelGrid id="#{msg.pnlIdCal}" columns="3"
columnClasses="labelPanelGrid, contentPanelgrid">
<p:outputLabel value="#{msg.lblBirth}" for="#{msg.calId}" />
<p:calendar value="#{usuarioMB.usuario.nascimento}"
id="#{msg.calId}" locale="#{msg.calLocale}" showButtonPanel="true"
navigator="true" />
<p:outputLabel value="(Ex: 16-04-1980)" />
</h:panelGrid>
<br />
<div id="btnForms" style="margin-left: 120px;">
<p:commandButton value="Alterar Usuário" id="alt_usuario"
action="#{usuarioMB.alterar()}" update=":usuarioDataTable:tableUsuarios"
process="#this" style="margin-left:5px;" oncomplete="dlg.hide();"/>
<p:commandButton value="Criar nova senha e mandar por email"
id="alt_senha"
action="#{usuarioMB.sendEmail(usuario.email)}"
process="#this"
style="margin-left:5px;" />
<p:commandButton value="Cancelar" onclick="dlg.hide();"
style="margin-left:5px;" />
</div>
</h:form>
</p:dialog>
3) When i modify the attribute through the fields in the modal, then use the command action "alterar" , then the managed bean still keeps the reference to the user's original datas, and no update happens.
public String alterar() {
try {
gerenciarUsuarioBean.alterar(usuario);
JSFMessageUtil.sendInfoMessageToUser("Usuário salvado com sucesso!");
} catch (DaoExcecao e) {
LOG.error(e);
JSFMessageUtil.sendErrorMessageToUser("Erro cadastrando usuário !");
}
usuario = new Usuario();
return "/views/gerencia/gerenciarUsuarios.xhtml";
}
In a nutshell, the user's attributes are auto merged in the database. Any help is welcome..
Ok, then there was a bit of confusion in the command buttons (process / update)
1) datatable cmd:
<p:commandButton value="alterar"
action="#{usuarioMB.carregarAlteracao(u)}" update=":usuarioDesc:usr"
process="#this" onclick="dlg.show();" />
2) Update button
<p:commandButton value="Alterar Usuário" id="alt_usuario"
action="#{usuarioMB.alterar()}"
update=":usuarioDataTable:tableUsuarios" process="#form"
style="margin-left:5px;" oncomplete="dlg.hide();" />
Hope it helps someone.

download doesn't work inside dialog jsf2 primefaces

I have this problem
when I put download link into a dialog box it doesn't work, but when I put it into panelgrid it works
is it a bug in primefaces or what ?
do you have any idea
<h:form>
<p:panel header="Query">
<.......some come is here ........
<p:commandButton value="Export CSV" icon="ui-icon-document"
process="#this" rendered="#{xxx.showTable}"
oncomplete="exportConfirmationDialogShow.show()"></p:commandButton>
</h:panelGrid>
</p:outputPanel>
</h:panelGrid>
</p:panel>
</h:form>
Dialog ;
<p:dialog header="Choose Delimiter Type" id="dialogCSV"
widgetVar="exportConfirmationDialogShow" resizable="false">
<h:form id="csvForm">
<h:panelGrid columns="2" style="margin-bottom:10px">
<h:outputLabel value="Delimiter:" />
<p:selectOneRadio id="delimiter" value="#{xxx.delimiterType}">
<f:selectItem itemLabel="Tab" itemValue="tab" />
<f:selectItem itemLabel="Pipe" itemValue="|" />
<f:selectItem itemLabel="Comma" itemValue="," />
</p:selectOneRadio>
</h:panelGrid>
<p:commandButton id="exportCsv" value="Export CSV"
actionListener="#{xxx.export2CSV}" ajax="false"
onclick="PrimeFaces.monitorDownload(hideStatus)">
<p:fileDownload value="#{xxx.exportFile}"
contentDisposition="attachment" />
</p:commandButton>
</h:form>
<script type="text/javascript">
function showStatus() {
exportConfirmationDialogShow.show();
}
function hideStatus() {
exportConfirmationDialogShow.hide();
}
</script>
</p:dialog>

Resources