Previous values are appearing after closing Modal Panel

[ambrish_kumar]

Hi Everyone,

I am rendering a modal panel on button click. Inside modal panel , I have entered some invalid values,so that the validation fails.

Now I close the modal panel,and again open it , this time the values entered are appearing for fields inside modal paenl.

Here is the code for rendering a modal panel.

<h:form id="showAddform">
<h:panelGrid columns="1" columnClasses="name" styleClass="panelGrid">
     <a:commandButton id="addUserButton" value="#{messages.btnNewUser}"
     reRender="commonPanel" action="#{userAction.renderAddUser}" />
</h:panelGrid>
</h:form>

and code for modal panel is ,

<a:outputPanel id="commonPanel"> 
               <rich:modalPanel id="commonMp" styleClass="modalPanel" top="10"
                    keepVisualState="#{userAction.showOverlay}" autosized="true"
                    minWidth="600" minHeight="100"
                    style="background-image: url('../img/overlayBg.png');background-repeat: repeat;background-color: transparent;"
                    shadowDepth="#{messages.valShadowDepth}"
                    headerClass="modalPanel-header" controlsClass="modalPanel-controls">
                    <f:facet name="header">
                         <h:outputText value="#{userAction.modelPanelHead}" />
                    </f:facet>
                    <f:facet name="controls">
                         <h:graphicImage value="/img/closeButton.png" alt="X" border="0"
                              style="cursor: pointer; cursor: hand;"
                              onclick="Richfaces.hideModalPanel('commonMp')" >
                         <a:support event="onclick" action="#{userAction.closeLayer}" 
                         ajaxSingle="true" disableDefault="true" eventsQueue="closeLayerUserQueue" />     
                         </h:graphicImage>
                    </f:facet>
                    
                    <h:panelGrid styleClass="modalPanel-panelGrid">
                         <h:message styleClass="message" for="commonPanel" style="color:red;"/>
                         <h:form>
                         <h:panelGrid columns="1" columnClasses="name"
                                   rendered="#{userAction.formToLoad=='addUserForm'}"
                                   styleClass="panelGrid">
                                   
                         <s:div styleClass="modalPanel-panelGrid-container-div">
                         
                                   <h:panelGrid columns="1" border="0"
                                        columnClasses="formLabel,formValue" rowClasses="formLabel">
                                        <s:decorate id="userTypeDecoration" template="../layout/edit.xhtml">
                                             <ui:define name="label">#{messages.lblUserType}</ui:define>
                                             <h:selectOneMenu value="#{userBean.userType}" required="true" 
                                             requiredMessage="Value is required">
                                                  <s:selectItems value="#{userAction.userTypes}" var="cs"
                                                       label="#{cs.strUserType}"
                                                       noSelectionLabel="#{messages.defaultListItem}" />
                                                  <s:convertEntity />
                                             </h:selectOneMenu>
                                        </s:decorate>
                                   </h:panelGrid>
                                   <h:panelGrid columns="2" border="0"
                                        columnClasses="formLabel,formValue" rowClasses="formLabel">

                                        <s:decorate id="nameDecoration" template="../layout/edit.xhtml">
                                             <ui:define name="label">#{messages.lblUserName}</ui:define>
                                             <h:inputText id="name" value="#{userBean.strUserName}" required="true" 
                                             requiredMessage="Value is required"/>
                                        </s:decorate>                                        
                                   </h:panelGrid>
                                   <h:panelGrid columns="1" border="0" width="100%"
                                        columnClasses="formLabel,formValue" rowClasses="formLabel">
                                        <s:decorate id="descDecoration" template="../layout/edit.xhtml">
                                             <ui:define name="label">#{messages.lblDescription}</ui:define>
                                             <h:inputTextarea id="desc" rows="8" cols="65"
                                                  value="#{userBean.strDescription}" />
                                        </s:decorate>
                                   </h:panelGrid>                              
                                   
                                   <h:panelGrid width="330" id="save">
                                        <a:commandButton id="saveUserButton" value="#{messages.btnSave}"
                                             reRender="commonPanel"
                                             action="#{userAction.persistUserDetails}"
                                             rendered="#{userBean.iuserId == null}" />     
                                   </h:panelGrid>
                                   
                         </s:div>
                         </h:panelGrid> 
                    </h:form>                         
               </h:panelGrid>
          </rich:modalPanel>
</a:outputPanel>

I am clearing the UserBean everytime I open or close the modalpanel.

userBean = null;

in both methods renderAddUser() and closeLayer().

Thanks

Ambrish

[niox.nikospara.yahoo.com]

Hello,

Please check again these lines:

<f:facet name="controls">
     <h:graphicImage value="/img/closeButton.png" alt="X" border="0"
          style="cursor: pointer; cursor: hand;"
          onclick="Richfaces.hideModalPanel('commonMp')"
     >
          <a:support event="onclick" action="#{userAction.closeLayer}" 
               ajaxSingle="true" disableDefault="true"
               eventsQueue="closeLayerUserQueue"
          />
     </h:graphicImage>
</f:facet>

When you click on the graphicImage, its onclick handler is executed, hiding the modal panel. OK so far. However the disableDefault="true" means that there will be no AJAX call, so the server is not informed of the action. You can easily verify that #{userAction.closeLayer} is not called, by setting a breakpoint. Besides that, I believe that you need a form for this to work, either wrap the entire modal panel or just the controls facet.

[ambrish_kumar]

Hi Nikos,

Thanks for the reply.

You are right. Actually the closeLayer() method is not called on closing modal panel. So I change the code as you suggested,but my problem is still not solved.Here is the new code ,

<f:facet name="controls">
<h:form>
<a:commandLink action="#{userAction.closeLayer}" oncomplete="Richfaces.hideModalPanel('commonMp')">
<h:graphicImage value="/img/closeButton.png" alt="X" border="0" />
</a:commandLink>                         
</h:form>
</f:facet>

This time the closelayer() method in called but the modal holds the previous values. Is there is something wrong in my modal panel code ? One more thing , I have bijected the UserBean as shown,

@In (required=false)
@Out (required=false)
UserBean userBean;

Thanks

Ambrish

[niox.nikospara.yahoo.com]

OK, let me suggest something else then:

<s:div id="commonPanel">
     <r:modalPanel
          showWhenRendered="true"
          rendered="#{userBean != null}"
          ...
     >
     ...
          <f:facet name="controls">
               <h:form>
                    <a:commandLink action="#{userAction.closeLayer}" reRender="commonPanel">
                         <h:graphicImage ... />
                    </a:commandLink>                         
               </h:form>
          </f:facet>
     ...
     </r:modalPanel>
</s:div>

The code to show the panel stays the same:

<a:commandButton id="addUserButton" value="#{messages.btnNewUser}"
     reRender="commonPanel" action="#{userAction.renderAddUser}" />

This should work, assuming userBean is initially null, gets created from #{userAction.renderAddUser} and is nulled again from #{userAction.closeLayer}. You also get the advantage of not rendering the code for the panel the first time (faster page load, the first time). However this method, as well as yours, will be rendering the entire panel on each hide/show operation.

[ambrish_kumar]

Hi Nikos,

Thanks for the reply.

Your code is not working. The modal panel is closed and the userBean is set to null but when we open the modal panel again by clicking on Add button, then it shows the previously entered values. I don't know why it is happening because I am setting the userBean to Null value on closing of modal panel.

I think there is some problem in my modal panel but I am unable to find out.

Thanks

Ambrish

[ambrish_kumar]

Hi Everyone,

Is nobody here who can help me on this problem?

My problem is still the same ,when I open the modal panel for adding user it shows the previously filled values.

I am setting null values for entity instance in closeLayer method. Please go through the code I have submitted earlier.

Any help would be appreciated.

Thanks

Ambrish

[ambrish_kumar]

Hi Everyone,

One thing I noticed that after closing modal panel,when I render the modal panel using following code:

<h:form id="showAddform">
<h:panelGrid columns="1" columnClasses="name" styleClass="panelGrid">
     <a:commandButton id="addUserButton" value="#{messages.btnNewUser}"
     reRender="commonPanel" action="#{userAction.renderAddUser}" />
</h:panelGrid>
</h:form>

Now modal panel renders but it doesn't call the getter and setter methods of binded bean i.e. UserBean in my case.

Could anybody tell me why this is happening ?

Thanks

Ambrish

[luxspes]

I do not know if it is related but you shold not use h:form with a:commandButton (you should be using a:form)

[ambrish_kumar]

Hi Francisco,

I have replace  <h:form> with <a:form> but it doesn't make any impact.

After closing modal panel, next time when it renders (add user button) then the getter method is called only for those field of UserBean for which validation is failed. It is not called for other fields and these fields appears already filled inside modal panel.

Thanks

Ambrish.