Using required="true" with <h:inputText> inside 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 last 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="200"
                    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="#{messages.lblAddEditUser}" />
                    </f:facet>
                    <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>
                    <s:div styleClass="modalPanel-panelGrid-container-div">
                         <h:panelGrid styleClass="modalPanel-panelGrid">
                              <a:outputPanel ajaxRendered="true">
                                   <h:message styleClass="message" for="commonPanel" />
                              </a:outputPanel>
                              <a:form id="addEditUserForm">
                                   <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" required="true" 
                                             requiredMessage = "Value is required" 
                                             value="#{userBean.username}" />
                                        </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" required="true"
                                                  value="#{userBean.txtDescription}" requiredMessage = "Description is required" />
                                        </s:decorate>
                                   </h:panelGrid>

                                   <h:panelGrid width="330" id="save">
                                        <a:commandButton id="saveUserButton"
                                             value="#{messages.btnSave}"
                                             reRender="commonPanel"
                                             action="#{userAction.persistUserDetails}"
                                             onclick="this.disabled=true" style="margin: 3px"
                                                  rendered="#{userBean.iUserId == null}" />
                                        <a:commandButton id="updateUserButton"
                                             value="#{messages.btnUpdate}"
                                             reRender="commonPanel"
                                             action="#{userAction.updateUserDetails}"
                                             onclick="this.disabled=true" style="margin: 3px"
                                             oncomplete="this.disabled=false"
                                             rendered="#{userBean.iUserId != null}" />

                                   </h:panelGrid>
                              </a:form>
                         </h:panelGrid>
                    </s:div>
               </rich:modalPanel>
          </a:outputPanel>

But if I removed the required="true" attribute on the <h:inputText> and <h:inputTextArea> then Modal Panel on re-opens doesn't shows the last entered values. But in this case , i am unable to validate the form.

Thanks & Regards

Ambrish

[tmalatinszki]

Hi Abrish,

Once I had the same problem, You should clear the input values manually before closing modal panel.

FacesContext.getCurrentInstance().getViewRoot().findComponent("addEditUserForm:name").clear();
FacesContext.getCurrentInstance().getViewRoot().findComponent("addEditUserForm:desc").clear();

Regards,

Tamas

[ambrish_kumar]

Hi,

I have tried this but my problem still persists.

((HtmlInputText) FacesContext.getCurrentInstance().getViewRoot().findComponent("addEditUserForm:name")).setSubmittedValue("");
((HtmlInputTextarea) FacesContext.getCurrentInstance().getViewRoot().findComponent("addEditUserForm:desc")).setSubmittedValue("");
          
     

Regards,

Ambrish