6 Replies Latest reply on Mar 18, 2010 3:45 PM by Manuel Palacio

    Modal Panel Holding the Previously Entered Values

    Ambrish Singh Newbie

      Hi Everyone,


      I am opening a modal panel by pressing a button.


      Here is the code for opening 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 my modal panel is here,




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




      Now the problem is that, suppose I leave few required fields as empty, then validation messages are displaying with color of labels are RED. After that I closed the modal Panel by clicking on X.


      Now , next time when I am opening the Modal Panel then it displays the previously filled value and some field labels (mandatory fields) as RED.


      Is there any way so that the Modal panel doesn't hold the previously entered values.


      Thanks


      Ambrish


        • 1. Re: Modal Panel Holding the Previously Entered Values
          Francisco Jose Peredo Noguez Master



          Is there any way so that the Modal panel doesn't hold the previously entered values.



          You would have to empty (or create new) the model objects binded to the form controls inside the modalpanel and re-render is contents.


          Another option is to use javaScript (preferably with jQuery) to clean the form elements client side (the problem there is that they will remind linked to the same server side object, so its values will be overwritten and that may, or may not be, what you want.




          Thanks

          Ambrish



          This is a question that could get better answers in the Richfaces forum.

          • 2. Re: Modal Panel Holding the Previously Entered Values
            Binesh Gummadi Novice

            Why not clear the instance once you add the user or close the modal panel?


            userBean.clearInstance();
            // Assuming userBean is extending EntityHome



            This is what clearInstance is doing.




               /**
                * Clear the managed entity (and id), allowing the {@link EntityHome} to be
                * reused.
                */
               public void clearInstance()
               {
                  setInstance(null);
                  setId(null);
               }



            • 3. Re: Modal Panel Holding the Previously Entered Values
              Ambrish Singh Newbie

              Hi Everyone,


              My problem is solved. I have used <s:link> with propogation type end.




              <s:link onclick="Richfaces.hideModalPanel('commonMp')"
                    propagation="end" >
                    <h:graphicImage value="/img/closeButton.png" alt="X" border="0"/>               
              </s:link>






              Thanks


              Ambrish

              • 4. Re: Modal Panel Holding the Previously Entered Values
                Ambrish Singh Newbie

                Hi Everyone,


                As I said that my problem is solved but right now when I clicked on X to close Modal panel, the page get refreshed.


                Is there any other way so that the page should not refreshed. I have already tried the solution suggested by Binesh.


                Thanks


                Ambrish

                • 5. Re: Modal Panel Holding the Previously Entered Values
                  Jarek Gilewski Newbie

                  Hello,


                  i had the same problem and i found this page http://wiki.apache.org/myfaces/ClearInputComponents


                  Put somewhere in your Util package the following functions:


                  public static void clearSubmittedValues(String formName) {
                       FacesContext context = FacesContext.getCurrentInstance();
                       UIViewRoot view = context.getViewRoot();
                       UIComponent uiComponent = view.findComponent(formName);
                       clearSubmittedValues(uiComponent);
                  }
                       
                       /*
                        * see: http://wiki.apache.org/myfaces/ClearInputComponents
                        */
                  public static void clearSubmittedValues(UIComponent uiComponent) {
                          if (uiComponent == null) {
                              return;
                          }
                  
                          Iterator<UIComponent> children = (uiComponent).getFacetsAndChildren();
                          while (children.hasNext()) {
                              clearSubmittedValues(children.next());
                          }
                          if (uiComponent instanceof UIInput) {
                              ((UIInput) uiComponent).setSubmittedValue(null);
                              ((UIInput) uiComponent).setValue(null);
                              ((UIInput) uiComponent).setLocalValueSet(false);
                              ((UIInput) uiComponent).resetValue();
                          }
                                  
                  }
                  



                  and in your modal panel you can use cancel/close button


                  <a4j:commandButton value="#{messages['action.cancel']}" immediate="true"
                            action="#{myEntityHome.cancel}"
                            oncomplete="#{rich:component('myModalPanel')}.hide();" />



                  where


                       public void cancel() {
                            ...
                            CommonUtil.clearSubmittedValues("myForm");
                       }
                  



                  Regards
                  Jarek