Richfaces 弹出窗口中的“清理”按钮不起作用答案

【问题标题】：Clean button in Richfaces Popup not workingRichfaces 弹出窗口中的“清理”按钮不起作用
【发布时间】：2012-08-20 18:08:34
【问题描述】：

我的按钮代码是：

<h:commandButton value="Clean" action="#{facesBean.cleanFilter()}" >
    <f:ajax execute="@form" render="result id name"/>
</h:commandButton>

我可以看到它调用了我的操作，并且我的属性在 backbean 上是空的，但是我的表单输入没有被清理。它应该清理两个输入和一个表。桌子被清理了，但我的输入没有。

我已经搜索了一些没有运气的解决方案。

有什么问题吗？

我的弹出窗口有它自己的文件 popup.xhtml，我通过 ui:include 使用它。这是我的弹出窗口代码：

<h:form id="userForm">
    <rich:popupPanel id="popup-user" modal="true" headerClass="popup-header" styleClass="popup" domElementAttachment="form" keepVisualState="true" width="620" autosized="true" top="50">
        <f:facet name="header" >
            <h:outputText value="Search User" />
        </f:facet>
        <f:facet name="controls">
            <h:commandLink>
                <h:graphicImage url="/images/icon-close.png" alt="Close" styleClass="icone-close"/>
                <rich:componentControl target="popup-user" operation="hide" />
            </h:commandLink>
        </f:facet>

        <fieldset>
            <legend class="section">Search User Filter</legend>
            <h:panelGrid styleClass="form" columns="1" cellspacing="0" columnClasses="item">
                <h:panelGroup>
                    <h:outputLabel styleClass="label-form" value="ID" for="id" />
                    <br />
                    <h:inputText id="id" value="#{facesBean.filter.id}" styleClass="textfield" maxlength="8"/>
                </h:panelGroup>
                <h:panelGroup>
                    <h:outputLabel styleClass="label-form" value="Name" for="name" />
                    <br />
                    <h:inputText id="name" value="#{facesBean.filter.name}" styleClass="textfield" />
                </h:panelGroup>
            </h:panelGrid>
        </fieldset>

        <div id="buttons">
            <h:commandButton value="Search" action="#{facesBean.search()}">
                <f:ajax execute="@form" render="result-users" />
            </h:commandButton>
            <h:commandButton value="Clean" action="#{facesBean.clean()}" >
                <f:ajax execute="@form" render="id name result-user"/>
            </h:commandButton> 
        </div>      

        <h:panelGroup id="result-user">
                <rich:dataScroller for="userTable" styleClass="pagination" maxPages="5" boundaryControls="hide" renderIfSinglePage="false" fastControls="hide" stepControls="auto" execute="@form" render="userTable" />
                <rich:dataTable id="userTable" value="#{facesBean.list}" var="user" style="width:600px;" rows="10">
                    <f:facet name="header">
                        <rich:columnGroup>
                            <rich:column styleClass="left" style="width: 5%">
                                <h:outputText value="Action" />
                            </rich:column>
                            <rich:column styleClass="left" style="width: 10%">
                                <h:outputText value="ID" />
                            </rich:column>
                            <rich:column styleClass="left" style="width: 25%">
                                <h:outputText value="Name" />
                            </rich:column>
                            <rich:column styleClass="left" style="width: 25%">
                                <h:outputText value="E-mail" />
                            </rich:column>
                        </rich:columnGroup>
                    </f:facet>

                    <rich:columnGroup>
                        <rich:column>
                            <h:commandButton image="/images/icon-select.png" alt="Select" actionListener="#{mainBean.selectUser(user)}" styleClass="icon-select">
                                <f:ajax execute="@form" render=":form:#{field}" />
                                <rich:componentControl target="popup-user" operation="hide" />
                            </h:commandButton>
                        </rich:column>
                        <rich:column>
                            <h:outputText value="#{user.id}" />
                        </rich:column>
                        <rich:column>
                            <h:outputText value="#{user.name}" />
                        </rich:column>
                        <rich:column>
                            <h:outputText value="#{user.email}" />
                        </rich:column>
                    </rich:columnGroup>
                </rich:dataTable>
            </h:panelGroup>
        </h:panelGroup>
    </rich:popupPanel>
</h:form>

【问题讨论】：

你能显示rich:popupPanel标签和它周围的任何代码吗？
我已将其发布在我的主帖上。

标签： ajax jsf input popup richfaces

【解决方案1】：

在尝试了这么多事情之后，我尝试将我的输入放在 a 之间并更改了我的按钮，并且它起作用了。

看起来像这样：

    <a4j:outputPanel id="search-filter">
     <fieldset>
        <legend class="section">Search User Filter</legend>
        <h:panelGrid styleClass="form" columns="1" cellspacing="0" columnClasses="item">
            <h:panelGroup>
                <h:outputLabel styleClass="label-form" value="ID" for="id" />
                <br />
                <h:inputText id="id" value="#{facesBean.filter.id}" styleClass="textfield" maxlength="8"/>
            </h:panelGroup>
            <h:panelGroup>
                <h:outputLabel styleClass="label-form" value="Name" for="name" />
                <br />
                <h:inputText id="name" value="#{facesBean.filter.name}" styleClass="textfield" />
            </h:panelGroup>
        </h:panelGrid>
    </fieldset>
    </a4j:outputPanel>
    <div id="buttons">
        <h:commandButton value="Search" action="#{facesBean.search()}">
            <f:ajax execute="@form" render="result-users" />
        </h:commandButton>
        <a4j:commandButton value="Clean" action="#{facesBean.clean()}" >
            <f:ajax execute="@form" render="search-filter result-user"/>
        </a4j:commandButton> 
    </div>

【讨论】：

您确定没有嵌套表单吗？您需要 ui:include 包含来自父级的 h:form 之外的 popupPanel 的文件。此资源是追踪此类问题的最佳资源：stackoverflow.com/questions/2118656/…。我错过了您已经拥有 domElementAttachment="form" 的事实，我认为只要 ui:include 在表单中，您就不需要封闭的 h:form。 a4j:command 也有执行和渲染，你不需要嵌套的 f:ajax。

【解决方案2】：

感谢您更新您的帖子。我认为你有两个选择：

在 popupPanel 内移动表单，或
使用rich:popupPanel domElementAttachment="form" ...

这是为什么？非常令人困惑的是，popupPanel 在 dom 中被移动为 h:body 标记的子项。所以你写这个结构：

<h:body>
  <h:form id="userForm">
    <rich:popupPanel id="popup-user" ...>

它变成了这样：

<body>
  <div id="popup-user"> ...
  <form id="userForm"> ... </form>

问题是 popup-user 的内容不再是一个表单。发生这种情况的原因是需要相对于视口定位对话框以及使用 css 的复杂性。以下是我在调查为什么会这样工作时为自己写的一些笔记：

对话框使用绝对定位使对话框居中视口。它只是一个 div 使用 position: absolute, top: xxpx, left: xxpx 并显示：无或阻止。对话框占位符内的任何内容都是 position：relative，意思是“我体内的所有定位元素应该相对于我的位置定位”。

只有当它有一个 div 时，它才会相对于浏览器窗口定位绝对位置并且不嵌套在任何具有绝对位置的标签内，相对或固定位置。否则，它相对于包含标签。

所以无论你在哪里都可以实现相对于视口的定位把你的对话框（即div）作为body的子元素重新定位。所以即使如果您的对话框在表单内，它会移到表单外。这是如果你想有按钮，为什么对话框必须有自己的形式& 里面的链接。

【讨论】：