如何从richfaces弹出窗口刷新父jsf页面

Posted

技术标签:

【中文标题】如何从richfaces弹出窗口刷新父jsf页面【英文标题】:How to refresh parent jsf page from richfaces popup 【发布时间】:2011-10-31 07:05:12 【问题描述】:

我有一个包含几个字段的 JSF 页面。我从 BalusC 关注了这个tutorial,一切都很好。然后我为其添加了 RichFaces 支持,效果很好。我可以看到弹出窗口等工作。

现在我想做的是,一旦一个人被注册,我想在弹出窗口中显示名字(这也很好,我可以在弹出窗口中看到)。然后我希望能够在弹出窗口中更改该名称并将其反映在父级中,但我不知道该怎么做。请看一下。

Xhtml 页面

<!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 类

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;
    


用户类

 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;
        

    

根据 Arjan Tijms 的建议进行了更新

<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>

【问题讨论】:

【参考方案1】:

只需将rich:popupPanel 移出主窗体,并赋予它自己的窗体。如果您随后提交对话框中的表单,整个页面将重新呈现。

由于支持 bean 是视图范围的,以前的用户数据将被保留,只有用户名会更新为您在对话框中输入的任何内容。

此外,您可以通过 AJAX 提交表单,给主表单一个 ID 并重新渲染它。

例如

<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>

我在这里使用了 A4J commandButton,它有一个方便的 oncomplete 属性。您可以使用标准 ajax 标记上的 onevent 属性执行类似的操作,但需要使用更多代码。

请注意,如果主表单存在验证错误,则没有任何对策无法从其他表单更新(如果遇到这种情况,您最好针对该特定情况提出一个新问题)。

【讨论】:

感谢您的回复,我明白您在说什么(我认为 :))但未能正确获取代码。我已经给出了名为“form”的原始表单 ID,并将面板以其他表单移到了外面,但弹出窗口仍然没有关闭,也没有更新调试点显示它正在点击该方法但屏幕流程不正确请查看我更新的问题结束。非常感谢您的回复。谢谢 表单需要面板中,而不是在面板周围。此外,该按钮应关闭对话框(例如通过脚本)。 非常感谢你太棒了。你和 Blusc 一起工作吗:)【参考方案2】:

已经回答了,但我遇到了类似的问题。我的视图有一个&lt;rich:dataTable&gt; 来显示数据,我想用&lt;rich:popupPanel&gt; 中的选定项目过滤结果。我遇到了同样的问题:选择一个选项并没有更新表格(使用&lt;a4j:ajax&gt; 事件)。

默认情况下,弹出窗口附加到&lt;body&gt; 标签。所以,我在&lt;rich:popupPanel&gt; 中添加了domElementAttachment="form",它起作用了。

【讨论】:

以上是关于如何从richfaces弹出窗口刷新父jsf页面的主要内容,如果未能解决你的问题,请参考以下文章

打开弹出窗口并在关闭弹出窗口时刷新父页面

子窗口关闭,父窗口如何刷新

js如何关闭弹出框并刷新母版页中嵌套页面

parent.$.modalDialog( 弹出新增页面 ,保存后关闭子页面,刷新父页面,怎么写在线急。

firefox下如何关闭子窗口刷新父窗口? - 技术问答

刷新页面后如何显示模态弹出窗口?