How to refresh jsf parent page from richfaces popup

I have a JSF page with multiple fields. I followed this tutorial from BalusC, and all is well. Then I added RichFaces support, which works fine. I see pop-ups, etc. They work.

Now, what I'm trying to do is that, as soon as the person has been registered, I want to show the name in the pop-up window (this is also fine what I see in the pop-up window). Then I want to be able to change this name inside the popup and reflect it in the parent, but I don't know how to do it. Please look.

XHTML Page

<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:a4j="http://richfaces.org/a4j" xmlns:rich="http://richfaces.org/rich"> <h:head> <title>Registration</title> </h:head> <h:body> <h:form> <h:panelGrid columns="3"> <h:outputLabel for="username">Username</h:outputLabel> <h:inputText id="username" value="#{register.user.username}" required="true"> <f:ajax event="blur" render="usernameMessage" /> </h:inputText> <h:message id="usernameMessage" for="username" /> <h:outputLabel for="password">Password</h:outputLabel> <h:inputSecret id="password" value="#{register.user.password}" required="true" redisplay="true"> <f:ajax event="blur" render="passwordMessage" /> </h:inputSecret> <h:message id="passwordMessage" for="password" /> <h:outputLabel for="email">Email</h:outputLabel> <h:inputText id="email" value="#{register.user.email}" required="true"> <f:ajax event="blur" render="emailMessage" /> </h:inputText> <h:message id="emailMessage" for="email" /> <h:outputLabel for="birthdate">Birthdate (yyyy-MM-dd)</h:outputLabel> <h:inputText id="birthdate" value="#{register.user.birthdate}"> <f:convertDateTime pattern="yyyy-MM-dd" /> <f:ajax event="blur" render="birthdateMessage" /> </h:inputText> <h:message id="birthdateMessage" for="birthdate" /> <h:panelGroup /> <h:commandButton value="Register" action="#{register.submit}"> <f:ajax execute="@form" render="@form" /> </h:commandButton> <h:commandButton value="Edit Name in Popup"> <rich:componentControl target="popup" operation="show" /> </h:commandButton> <h:messages globalOnly="true" layout="table" /> </h:panelGrid> <rich:popupPanel id="popup" modal="true" resizeable="true" onmaskclick="#{rich:component('popup')}.hide()"> <f:facet name="header"> <h:outputText value="Simple popup panel" /> </f:facet> <f:facet name="controls"> <h:outputLink value="#" onclick="#{rich:component('popup')}.hide(); return false;"> X </h:outputLink> </f:facet> <h:panelGrid columns="3"> <h:outputLabel for="username2">Username</h:outputLabel> <h:inputText id="username2" value="#{register.user.username}" required="true"> </h:inputText> <h:commandButton value="Register" action="#{register.update}"> </h:commandButton> </h:panelGrid> </rich:popupPanel> </h:form> </h:body> </html> 

Java class

 package com.example; import java.io.Serializable; import javax.faces.application.FacesMessage; import javax.faces.bean.ManagedBean; import javax.faces.bean.ViewScoped; import javax.faces.context.FacesContext; @ManagedBean @ViewScoped public class Register implements Serializable { private static final long serialVersionUID = 1L; private User user; public Register() { user = new User(); } public void submit() { FacesMessage message = new FacesMessage("Registration succesful!"); FacesContext.getCurrentInstance().addMessage(null, message); } public void update() { FacesMessage message = new FacesMessage("Update succesful!"); FacesContext.getCurrentInstance().addMessage(null, message); } public User getUser() { return user; } } 

Custom class

  package com.example; import java.io.Serializable; import java.util.Date; public class User implements Serializable { private static final long serialVersionUID = 1L; private Long id; private String username; private String password; private String email; private Date birthdate; public Long getId() { return id; } public void setId(Long id) { this.id = id; } public String getUsername() { return username; } public void setUsername(String username) { this.username = username; } public String getPassword() { return password; } public void setPassword(String password) { this.password = password; } public String getEmail() { return email; } public void setEmail(String email) { this.email = email; } public Date getBirthdate() { return birthdate; } public void setBirthdate(Date birthdate) { this.birthdate = birthdate; } } 

Updated bit after Arjan Tijms offer

 <h:form id="form2"> <rich:popupPanel id="popup" modal="true" resizeable="true" onmaskclick="#{rich:component('popup')}.hide()"> <f:facet name="header"> <h:outputText value="Simple popup panel" /> </f:facet> <f:facet name="controls"> <h:outputLink value="#" onclick="#{rich:component('popup')}.hide(); return false;"> X </h:outputLink> </f:facet> <h:panelGrid columns="3"> <h:outputLabel for="username2">Username</h:outputLabel> <h:inputText id="username2" value="#{register.user.username}" required="true"></h:inputText> <h:commandButton value="Register" action="#{register.update}"> <f:ajax execute="@form" render=":form" /> </h:commandButton> </h:panelGrid> </rich:popupPanel> </h:form> 
+4
source share
2 answers

Just move rich:popupPanel from the main form and give it your own form. If you then submit the form, which in the dialog box reprints the entire page.

Since bean support is a viewport, previously the user data will be saved, and only the username will be updated with what you entered in the dialog box.

Alternatively, you can submit the form via AJAX, provide the main form ID and redisplay it.

eg.

 <rich:popupPanel id="popup" modal="true" resizeable="true" onmaskclick="#{rich:component('popup')}.hide()"> <f:facet name="header">Simple popup panel</f:facet> <h:form id="form2"> <h:outputLabel for="username2" value="Username"/> <h:inputText id="username2" value="#{register.user.username}" required="true"/> <a4j:commandButton value="do" action="#{register.update}" render="form" oncomplete="#{rich:component('popup')}.hide()"/> </h:form> </rich:popupPanel> 

I used here A4J commandButton , which has a convenient oncomplete attribute. You can do a similar thing with the onevent attribute on the standard ajax tag, but using a bit more code.

Please note that if the main form has validation errors, it is without any counter measures that cannot be updated from another form (if you encounter this, it is best to open a new question for this particular situation).

+4
source

He already answered, but I had a similar problem. My view has <rich:dataTable> for displaying data, and I want to filter the results with the selected elements in <rich:popupPanel> . I had the same problem: selecting an option did not update the table (using the <a4j:ajax> event).

Popups are by default tied to the <body> . So, I added domElementAttachment="form" to <rich:popupPanel> and it worked.

0
source

All Articles