I am trying to replicate primefaces ajax dialog form as in Primefaces showcase
My JSF code snippet is as below
<h:body>
<p:commandButton id="showDialogButton" type="button" value="Show"
onclick="PF('dlg').show()" />
<p:dialog header="Enter FirstName" widgetVar="dlg" appendToBody="true"
resizable="false">
<h:form id="form">
<h:panelGrid columns="2" style="margin-bottom:10px">
<h:outputLabel for="firstName" value="firstName:" />
<p:inputText id="firstName" value="#{backingBean.firstName}" />
</h:panelGrid>
<p:commandButton id="submitButton" value="Submit" update=":display"
oncomplete="PF('dlg').hide();" />
</h:form>
</p:dialog>
<p:outputPanel id="display" style="display:block;margin-top:10px;">
<h:outputText id="name" value="Hello #{backingBean.firstName}"
rendered="#{not empty backingBean.firstName}" />
</p:outputPanel>
My managed bean
#ManagedBean
#ViewScoped
public class BackingBean implements Serializable{
private String firstName;
public String getFirstName() {
return firstName;
}
public void setFirstName(String firstName) {
this.firstName = firstName;
}
}
No dialog is getting displayed on clicking submit button :(. I have also included appendToBody="true" but no result.In ie i get javascript error as "Object Expected". Please help me out to solve this issue.
which version of primefaces you use ?
If you use Primefaces 3.5 or older:
<p:commandButton id="showDialogButton" type="button" value="Show"
onclick="dlg.show()" />
For Primefaces 4.0 :
<p:commandButton id="showDialogButton" type="button" value="Show"
onclick="PF('dlg').show()" />
In my case I had a script link to jquery in header. I droped it and primefaces started to work correctly
Related
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;
}
}
I have a JSF page that contains a growl message with primefaces Wizard component. The Wizard contains a FlowListener attribute. On the Flowevent, the growl message should fire however it is not. The FlowListener is working because code not related to updating the growl message is being executed however the growl message is not being displayed. Any help in fixing this is appreciated.
Using: JSF Mojarra 2.2, Primefaces 4.0, Galssfish 4
My JSF code:
<h:form>
<p:growl id="growl" showDetail="true" />
<p:wizard flowListener="#{reviewBean.handleFlow}" >
<p:tab id="Contact" title="Contact Details" >
<p:panel header="#{reviewBean.contactInstr}" >
<p:messages />
<h:panelGrid columns="2" >
<h:outputText value="Address: " />
<p:inputText value="#{reviewBean.contactData.address1}" required="true"
requiredMessage="Address is required" size="50" />
<h:outputText value="Address: " />
<p:inputText value="#{reviewBean.contactData.address2}" size="50" />
<h:outputText value="City: " />
<p:inputText value="#{reviewBean.contactData.city}" required="true"
requiredMessage="City is required" size="50"/>
<h:outputText value="State: " />
<p:selectOneMenu value="#{reviewBean.contactData.state}" >
<f:selectItems value="#{reviewBean.contactData.stateOptions}" />
</p:selectOneMenu>
<h:outputText value="Zip: " />
<p:inputText value="#{reviewBean.contactData.zip}" required="true"
requiredMessage="Zip is required" size="50" />
</h:panelGrid>
</p:panel>
</p:tab>
// Additional tabs omitted .........
</p:wizard>
</h:form>
FlowListener from my Bean:
public String handleFlow(FlowEvent event) {
String currentStepId = event.getOldStep(); // get current tab
String stepToGo = event.getNewStep(); // get next tab in Flow
RequestContext request = RequestContext.getCurrentInstance();
FacesContext context = FacesContext.getCurrentInstance();
switch (currentStepId) {
case "Contact":
// Save user entered contact information to database
datalist.saveContact(contactData, user.getId());
context.addMessage(null, new FacesMessage(FacesMessage.SEVERITY_INFO, "Data Saved", "") );
request.update("growl");
break;
// remaining cases omitted ........
}
return stepToGo; // return next tab in Flow
}
request.update("growl");
This is the wrong part.
Put an id to your form, then reference it like
i.e
request.update("your_form_id:growl");
Alternatively you could activate the auto-update feature of the growl with the attribute autoUpdate="true" of the growl component, and remove the request.update() method call in your backing bean.
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.
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.
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.