Clean button in Richfaces Popup not working

Question

My button code is:

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

I can see it calls my action and my properties are empty on the backbean, but my form inputs doesn't get cleaned. It should clean two inputs and one table. The table gets cleaned, but my input doesn't.

I've searched for some solutions with no luck.

Is there something wrong?

My popup has it's own file, popup.xhtml, and I use it through ui:include. Here is my code for the popup:

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

Answer 1

After trying so many things, I tried to put my inputs betwenn a and changed my buttoon for and it worked.

It looks like this:

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

Answer 2

Thanks for updating your post. I think you have two options:

• move the form inside the popupPanel, or

• use rich:popupPanel domElementAttachment="form" ...

why is this? Extremely confusingly the popupPanel gets moved in the dom to be a child of the h:body tag. So you write this structure:

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

and it becomes this:

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

The problem is that the contents of popup-user are no longer in a form. The reason that this happens is the requirement to position the dialog relative to the viewport and the complication of working with css. Here are some notes I wrote up for myself when investigating why this works the way it does:

A dialog uses absolute positioning to center the dialog in the viewport. It's just a div using position: absolute, top: xxpx, left: xxpx and display: none or block. Anything inside the dialog placeholder are position: relative, which means "all positioned elements inside of me should be positioned relative to my position".

A div is only positioned relative to the browser window if it has an absolute position and is NOT nested inside any tag that has absolute, relative or fixed position. Otherwise it is positioned relative to the containing tag.

So to achieve positioning relative to the viewport no matter where you put your dialog (i.e. div) it is relocated as a child of the body. So even if your dialog is within a form, it gets moved outside the form. This is why the dialog has to have it's own form if you want to have buttons & links within it.