How can I show all validation messages in one pop up using growl, because by default every validation message on the client side creates new pop up.
Of course I could do validation on the server side and send final message to the growl but is it possible to do it on the client side?
Some code goes here:
<p:dialog id="chPwD" header="#{res['user.passwordDialogHeader']}" widgetVar="changePwV" closeOnEscape="true" resizable="false">
<p:growl id="growl" showDetail="false" life="3000" />
<h:panelGrid id="chPwPG" columns="1" cellpadding="1" transient="true">
<h:panelGrid id="chPwPGi" columns="2" cellpadding="1">
<p:outputLabel for="pwd0" value="#{res['user.oldPassword']}" />
<h:panelGroup>
<p:password id="pwd0" label="#{res['user.oldPassword']}" value="#{mngr.oldPassword}" required="true" style="width:250px;"/>
<span style="display:inline-block;"><p:message for="pwd0"/><p:messages for="pwd0"/></span>
</h:panelGroup>
<p:outputLabel for="pwd1" value="#{res['user.newPassword']}" />
<h:panelGroup>
<p:password id="pwd1" label="#{res['user.newPassword']}" value="#{mngr.newPassword}" match="pwd2" required="true" style="width:250px;"/>
<span style="display:inline-block;"><p:message for="pwd1"/></span>
</h:panelGroup>
<p:outputLabel for="pwd2" value="#{res['user.repeatNewPassword']}" />
<h:panelGroup>
<p:password id="pwd2" label="#{res['user.repeatNewPassword']}" value="#{mngr.newPassword}" required="true" style="width:250px;"/>
<span style="display:inline-block;"><p:message for="pwd2"/></span>
</h:panelGroup>
</h:panelGrid>
</h:panelGrid>
<f:facet name="footer">
<p:commandButton value="#{res['btn.apply']}" style="margin-right:20px;" update=":chPwPG" action="#{mngr.changeSelectedUserPassword}" oncomplete="handlePwChangeRequest(xhr, status, args)"/>
<p:commandButton value="#{res['btn.cancel']}" onclick="changePwV.hide();" type="button"/>
</f:facet>
</p:dialog>
you should try <p:messages showDetail="false" showSummary="true"/> and it work for me.
Related
http://icefaces-showcase.icesoft.org/showcase.jsf?grp=ace:dialog&exp=Server%20Initiated I am just trying to learn how to use this component. But unable to run this example. When I click the button nothing happens. Does anybody have any idea? There is no error message either.
<h:form>
<h:panelGroup style="display:block; text-align:center;">
<ace:pushButton id="show" value="Show Dialog"
type="button">
<ace:ajax execute="#none" render="#none"
onStart="ice.ace.instance('#{dialog.clientId}').show(); return false;"/>
</ace:pushButton>
</h:panelGroup>
</h:form>
<ace:dialog id="dialog" binding="#{dialog}"
header="A sample dialog overview example"
closable="false"
modal="true"
draggable="false"
showEffect="clip"
hideEffect="fade"
width="400">
<h:form id="inputForm">
<h:panelGrid columns="2" width="100%">
<h:outputLabel id="firstNameLabel" for="firstNameInputField" value="First Name:"/>
<ace:textEntry id="firstNameInputField"
value="#{dialogBean.firstName}" />
<h:outputLabel id="lastNameLabel" for="lastNameInputField" value="Last Name:"/>
<ace:textEntry id="lastNameInputField"
value="#{dialogBean.lastName}"/>
</h:panelGrid>
<h:panelGrid width="100%" style="text-align: center;">
<ace:pushButton id="submitBtn"
value="Click me once done with input">
<ace:ajax execute="#form" render="#all"
onSuccess="ice.ace.instance('#{dialog.clientId}').hide(); "/>
</ace:pushButton>
</h:panelGrid>
</h:form>
</ace:dialog>
<h:form id="outputForm">
<h:panelGrid id="outputPanel" columns="2">
<h:outputLabel value="Entered text: " for="enteredName"/>
<h:outputText id="enteredName" value="#{dialogBean.firstName} #{dialogBean.lastName}"/>
</h:panelGrid>
</h:form>
This is the client side code from the example.
<h:form prependId="false">
<h:commandButton id="show" value="Show Dialog" onclick="ice.ace.instance('myDialog').show();" type="button"/>
<ace:dialog id="myDialog"
header="A sample dialog overview example"
width="400">
<h:outputText value="i will fix this"/>
</ace:dialog>
</h:form>
I was able to find the solution to the problem. One of the key problem was that I was suppose to use prependId="false" with form. so now the basic functionality works and on button click the ace:dialog appears.
I have a p:datascroller configured to display a list of entities and lazy loading them upon clicking the more button.
<h:form id="investigationOperationsForm">
<p:dataScroller
value="#{investigationManagerBackingBean.lazyLoadedInvestigationOperations}"
var="investigationOperation" chunkSize="9" lazy="true"
rowIndexVar="test">
<f:facet name="header">
Scroll down to load investigations
</f:facet>
<h:panelGrid columns="2" style="width:100%"
columnClasses="logo,detail">
<p:commandLink oncomplete="PF('investigationDialogW').show()"
update="investigationEditorForm" immediate="true">
<f:setPropertyActionListener value="#{investigationOperation}"
target="#{investigationManagerBackingBean.selection}" />
<p:graphicImage alt="Investigation Operation"
url="/images/common/investigation-operation.png" />
</p:commandLink>
<!-- h:outputText value="#{investigationOperation.name}" /-->
<p:outputPanel id="pnl">
<h:panelGrid columns="2" cellpadding="5">
<h:outputText value="Name:" />
<h:outputText value="#{investigationOperation.name}"
style="font-weight: bold" />
<h:outputText value="Description:" />
<h:outputText value="#{investigationOperation.shortDescription}"
style="font-weight: bold" />
</h:panelGrid>
<p:draggable for="pnl" />
</p:outputPanel>
</h:panelGrid>
<f:facet name="loader">
<p:outputPanel
visible="#{investigationManagerBackingBean.lazyLoadedInvestigationOperations.rowCount gt 10}"
rendered="#{investigationManagerBackingBean.lazyLoadedInvestigationOperations.rowCount gt 10}">
<p:commandLink value="More" />
</p:outputPanel>
</f:facet>
</p:dataScroller>
</h:form>
In addition, I have a dialog that pops up when the p:commandLink oncomplete method is executed where I can update the value of the current selection and persist the changes.
<p:dialog id="investigationDialog"
header="#{msg['inv-manager.invDialog.header.title']}"
widgetVar="investigationDialogW" minWidth="400" minHeight="400"
resizable="false" position="center center" modal="true">
<p:panel id="investigationEditorPanel">
<h:form id="investigationEditorForm">
<h:panelGrid columns="2" cellpadding="5">
<h:outputLabel for="name"
value="#{msg['inv-manager.invDialog.nameFieldLabel']}" />
<p:inplace id="nameInplaceEditor" editor="true">
<p:inputText
value="#{investigationManagerBackingBean.selection.name}"
id="name" required="true" immediate="true"
label="#{msg['inv-manager.invDialog.nameFieldInputLabel']}" />
</p:inplace>
<h:outputLabel for="shortDescription"
value="#{msg['inv-manager.invDialog.shortDescriptionFieldLabel']}" />
<p:inplace id="shortDescriptionInplaceEditor" editor="true">
<p:inputText
value="#{investigationManagerBackingBean.selection.shortDescription}"
id="shortDescription" required="true" immediate="true"
label="#{msg['inv-manager.invDialog.shortDescriptionFieldInputLabel']}" />
</p:inplace>
<h:outputLabel for="description"
value="#{msg['inv-manager.invDialog.descriptionFieldLabel']}" />
<p:inputTextarea id="description" required="false"
label="#{msg['inv-manager.invDialog.descriptionFieldInputLabel']}"
immediate="true"
value="#{investigationManagerBackingBean.selection.description}" />
<p:commandButton id="okButton"
value="#{msg['inv-manager.invDialog.okButton']}" type="submit"
partialSubmit="true" process="investigationEditorForm"
action="#{investigationManagerBackingBean.createOrUpdate()}"
onclick="dlg.hide();" />
</h:panelGrid>
</h:form>
</p:panel>
</p:dialog>
The backing bean is configured to be #ViewScoped and everything works as defined. However, upon update the values of the p:datascroller are reset and the load method of the lazy loading model is executed and the datascroller is repopulated with new values from the database.
I have no reference to the datascroller or its containing form in the p:dialog and am wondering why the datascroller is being updated automagically? What am I missing in the equation. Have I overlooked something or something specific to the p:datascroller model that I need to consider when following this approach?
Look forward to the expertise of the community in resolving this issue.
Many thanks in advance :)
I have a dialog that open when the page is reloaded and ask for the login. This was working perfectly until I create another dialog that open when I click in a button. Both have different names and I am calling then right! I really don't know what is wrong..
Now, when I reload the page it shows me the login dialog and I put the right login and password but it rejects.. But if I remove the other dialog and do the same thinh, it works.
My code:
<body onload="PF('dlgLogin').show();">
<h:form name="">
<p:growl id="growl" sticky="true" showDetail="true" life="2000" />
<p:dialog header="Login" widgetVar="dlgLogin" modal="true" closable="false" resizable="false">
<h:panelGrid columns="2" cellpadding="5">
<h:outputLabel for="login" value="Username:" />
<p:inputText id="login" value="#{loginView.login}" required="true" label="Login" />
<h:outputLabel for="password" value="Password:" />
<p:password id="password" value="#{loginView.senha}" required="true" label="Password" />
<f:facet name="footer">
<p:commandButton value="Login" update="growl" action="#{loginView.login}"
oncomplete="handleLoginRequest(xhr, status, args)" />
</f:facet>
</h:panelGrid>
</p:dialog>
<p:dialog header="Nova classificação" widgetVar="dlgClassificacao" modal="true" resizable="false">
<h:panelGrid columns="2" cellpadding="5">
<h:outputLabel for="nome" value="Nome:" />
<p:inputText id="nome" value="#{adminView.classNome}" required="true" label="Nome" />
<h:outputLabel for="valor" value="Valor:" />
<p:inputText id="valor" value="#{adminView.classPreco}" required="true" label="Valor" />
</h:panelGrid>
<f:facet name="footerAdicionar">
<p:commandButton value="Adicionar" action="#{adminView.novaClassificacao}" />
</f:facet>
</p:dialog>
<p:layout>
<p:layoutUnit position="center">
<p:dataTable id="classificacoes" selection="#{adminView.selectedClassificacao}" var="classificacao" value="#{adminView.classificacoes}" style="margin-bottom:20px">
<p:ajax event="rowSelect" listener="#{adminView.onRowSelect}"/>
<p:column>
<f:facet name="header">
<h:outputText value="Nome" />
</f:facet>
<h:outputText value="#{classificacao.nome}" />
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Valor" />
</f:facet>
<h:outputText value="#{classificacao.preco}" />
</p:column>
</p:dataTable>
<f:facet name="footer">
<p:commandButton title="Novo" icon="ui-icon-document" onclick="PF('dlgClassificacao').show();" type="button"/>
<p:commandButton title="Editar" icon="ui-icon-pencil" />
<p:commandButton title="Deletar" icon="ui-icon-trash" update="classificacoes" actionListener="#{adminView.excluirClassificacao}"/>
</f:facet>
</p:layoutUnit>
</p:layout>
</h:form>
<script type="text/javascript">
function handleLoginRequest(xhr, status, args) {
if(args.validationFailed || !args.loggedIn) {
PF('dlg').jq.effect("shake", {times:5}, 100);
}
else {
PF('dlg').hide();
$('#loginLink').fadeOut();
}
}
</script>
</body>
The problem is that you are sending all the form data when you press the login button. Then you obtain messages indicating that you have not (naturally) typed any data for Nome nor Valor fields.
You can fix it by adding an id attribute to your login dialog and to your form and also adding a process attribute to your login button:
<p:commandButton process=":yourForm:dlgLogin" value="Login"
update="growl" action="#{loginView.login}" />
I'm using PrimeFaces 4.0 and I'm trying to use a dialog to change password.
I used password component to do this job It does n't work in a dialog but It works fine when I'm not using Dialog.
Here is my code
<h:form>
<p:dialog widgetVar="changePw" resizable="true" appendTo="#(body)"
modal="true" closable="false" id="changePw">
<p:panel header="change password">
<p:messages id="messages" showDetail="true" showSummary="false"
autoUpdate="true" />
<h:panelGrid columns="2" id="matchGrid">
<h:outputLabel for="pwdNew" value="New: *" />
<p:password id="pwdNew" value="#{passwordBean.newPw}" feedback="true"
match="pwdConf" required="true"
validatorMessage="Pw does n't matches"
requiredMessage="Value required">
</p:password>
<p:messages showDetail="true" showSummary="false" autoUpdate="true"
for="pwdNew" />
<h:outputLabel for="pwdConf" value="Confirm Password: *" />
<p:password id="pwdConf" value="#{passwordBean.newPwConfirmation}"
feedback="true" required="true"
validatorMessage="invalid password"
requiredMessage="Value required">
<f:validateRegex pattern="[A-Za-z0-9]{8,60}" />
</p:password>
</h:panelGrid>
</p:panel>
<p:separator></p:separator>
<p:commandButton value="Save" update="matchGrid"
process="#this" ajax="true"
actionListener="#{passwordBean.changePw}"
styleClass="ui-confirmdialog-yes"
oncomplete="changePw.hide();"
icon="ui-icon-check" />
<p:commandButton value="Cancel" process="#this"
onclick="changePw.hide();" styleClass="ui-confirmdialog-no"
icon="ui-icon-close" />
</p:dialog>
...
Thank for any suggestion !
If you use a 'appendTo="#(body)"', you need a form IN the dialog as can be read in the PrimeFaces documentation. But make sure that it is in the original xhtml NOT nested!
In addition, the process="#this" on the buttons prevent the other inputs to be submitted (this also won't work outside the dialog, so you most likely did not have that there). So remove that as well
I have a Form to add a new user. I am using Validator messages to control empty fields. If I enter invalid data and submit the form, error messages were displayed. After that I click on reset button, it doesn't work.
This my code in html:
<h:form id="newCustomerForm">
<p:dialog draggable="true" header="New Customer" widgetVar="customerDialogNew" resizable="false"
showEffect="clip" hideEffect="fold" style="position: absolute ;" id="dialog2">
<p:panelGrid id="newCustomer" columns="6" >
<f:facet name="header">
<p:graphicImage value="../../pictures/customerAdd.jpg"/>
</f:facet>
<p:outputLabel value="Name:" for="name" />
<p:inputText id="name" value="#{customerMB.name}" title="Name" required="true" requiredMessage="The Name field is required."/>
<p:message for="name" />
<p:outputLabel value="FamilyName:" for="familyName" />
<p:inputText id="familyName" value="#{customerMB.familyName}" title="FamilyName" required="true" requiredMessage="The FamilyName field is required."/>
<p:message for="familyName" />
</p:panelGrid>
<p:commandButton type="reset" immediate="true" update="newCustomerForm" value="Clear" icon="ui-icon-arrowrefresh-1-n" styleClass="ui-priority-primary">
</p:commandButton>
<p:commandButton value="Save" ajax="false" icon="ui-icon-circle-check" styleClass="ui-priority-primary" action="#{customerMB.addCustomer()}" />
</p:dialog>
</h:form>