6 Replies Latest reply on May 14, 2009 1:26 PM by Ambrish Singh

    Validation Inside Modal Panel

    Ambrish Singh Newbie

      Hi All,


      I have a modal panel in which I am updating bean values. Some fields are mandatory.After submitting the form , if any required field is left blank than appropriate message is displaying , like value is required.


      Now, the problem is that if I close the modal panel without filling the blank field , then next time it displays that field as blank.


      Thanks


      Ambrish

        • 1. Re: Validation Inside Modal Panel
          Damian Harvey Apprentice

          Do you mean that the next time you open the modal the field is blank? Maybe you could clarify?


          If you need to reset a modal panel you should reRender a div (or similar) inside the panel via the link that opens it. Don't reRender the modal itself - this was a Richfaces bug, not sure if it's fixed.


          eg.


          <a4j:commandLink action="#{myBean.resetModalValues()}" reRender="divInModalPanel" oncomplete="Richfaces.showModalPanel('myModal')" ajaxSingle="true" immediate="true"/>



          Cheers,


          Damian

          • 2. Re: Validation Inside Modal Panel
            Ambrish Singh Newbie

            Hi Damian,
            Thanks for the reply.


            Actually, I have a rich datatable with an image link. When you click on the
            image of a particular row ,it will open a modal panel. Inside modal panel I am not providing any value and left some required fields as blank.Now after closing the modal panel , my datatable is showing those entries as blank. On closing the modal panel , I am reRendering the datatable. My datatable is inside a a:outputPanel.


            Any help would be appreciated.


            Thanks


            Ambrish

            • 3. Re: Validation Inside Modal Panel
              Damian Harvey Apprentice

              This doesn't sound like the same problem? Maybe you could post your page code.


              Cheers,


              Damian.

              • 4. Re: Validation Inside Modal Panel
                Ambrish Singh Newbie

                Hi Damian ,


                Here is the code that calls the modal panel :



                <a:outputPanel id="searchResults" ajaxRendered="true">
                                    <h:outputText value="#{messages.noResult}"
                                         rendered="#{companyList != null and companyList.rowCount==0}" />
                                    <div class="section"><rich:dataTable id="companyList"
                                         value="#{companyList}" var="company"
                                         rendered="#{companyList.rowCount>0}"
                                         columnClasses="dataTableColumn" styleClass="rich-dataTable"
                                         style="margin-left: 4px;margin-right: 4px;"
                                         headerClass="dataTableHeader">
                
                                         <rich:column>
                                              <f:facet name="header">
                                                   Company Name
                                              </f:facet>
                                                  #{company.strName}
                                               </rich:column>
                                         <rich:column>
                                              <f:facet name="header">
                                                   Company Type
                                              </f:facet>
                                                        #{company.companyType.strType}
                                               </rich:column>
                                         <rich:column>
                                              <f:facet name="header">
                                                   <h:panelGrid columns="2" border="0"
                                                        styleClass="dataTablePanelGrid">
                                                        <h:graphicImage value="/img/upArrow.gif" border="0"
                                                             rendered="#{manageCompany.showArrow =='updtCreated'}" />
                                                        <h:graphicImage value="/img/downArrow.gif" border="0"
                                                             rendered="#{manageCompany.showArrow =='downdtCreated'}" />
                
                                                        <h:form>
                                                             <a:commandLink action="#{manageCompany.sortCompany}"
                                                                  value="#{messages.lblDateCreated}">
                                                                  <f:param name="orderBy" value="dtCreated" />
                                                             </a:commandLink>
                                                        </h:form>
                                                   </h:panelGrid>
                                              </f:facet>
                                              #{company.dtCreated}
                                          </rich:column>
                                    <rich:column style="width: 110px;">
                                              <f:facet name="header">
                                                   <h:outputText value="#{messages.lblAction}"
                                                        styleClass="dataTablePanelGrid" />
                                              </f:facet>
                                              <h:form>
                                                   
                                                   <a:commandLink
                                                        action="#{manageCompany.getCompanyDetails(company)}"
                                                        oncomplete="this.disabled=false"               
                                                        reRender="commonPanel" onclick="this.disabled=true"
                                                        style="margin-right: 5px;" ajaxSingle="true" 
                                                        ignoreDupResponses="true" requestDelay="1000" 
                                                        eventsQueue="companyDetailQueue">
                                                        <h:graphicImage value="/img/edit.gif" border="0" />     
                                                   </a:commandLink>
                                                   
                                              </h:form>
                                    </rich:column>
                                    </rich:dataTable> 
                                    </div>
                               </a:outputPanel>






                And the modal panel is



                <a:outputPanel id="commonPanel"> 
                               <rich:modalPanel id="commonMp" styleClass="modalPanel" top="10"
                                    keepVisualState="#{manageCompany.overlayVisible}" autosized="true"
                                    minWidth="650" 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="#{manageCompany.modelPanelHead}" />
                                    </f:facet>
                                    <f:facet name="controls">
                                    <h:form>
                                         <a:commandLink action="#{manageCompany.closeLayer}" reRender="companyList"
                                                   oncomplete="Richfaces.hideModalPanel('commonMp')" >
                                                   <h:graphicImage value="/img/closeButton.png" alt="X" border="0" />
                                         </a:commandLink>
                                    </h:form>                         
                                    </f:facet>
                <h:panelGrid styleClass="modalPanel-panelGrid">
                                         <h:message styleClass="message" for="commonPanel" />
                                         <h:form>
                                         <h:panelGrid columns="1" columnClasses="name"
                                                   rendered="#{manageCompany.formToLoad=='addEditCompanyForm'}"
                                                   styleClass="panelGrid">
                                                   
                                         <s:div styleClass="modalPanel-panelGrid-container-div">
                                         
                                                   <h:panelGrid columns="2" border="0" width="100%"
                                                        columnClasses="formLabel,formValue" rowClasses="formLabel"
                                                        rendered="#{companyMaster.strCompanyLogo != null and companyMaster.strCompanyLogo != ''}">
                                                        <s:decorate id="logo" template="../layout/edit.xhtml">
                                                             <a:commandButton value="#{messages.lblViewImage}"
                                                                  onclick='window.open("#{messages.imagePath}#{companyMaster.strCompanyLogo}", "WinC", "width=550,height=250,toolbar=no,location=no,directories=no,status=no,menubar=no, scrollbars=no,resizable=yes,copyhistory=no")' />
                                                        </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.lblCompanyName}<h:outputText
                                                                       value="*" class="asterik" />
                                                             </ui:define>
                                                             <h:inputText id="name" value="#{companyMaster.strName}" />
                                                        </s:decorate>
                                                        <s:decorate id="typeDecoration" template="../layout/edit.xhtml"
                                                             rendered="#{companyMaster.icompanyId != '1'}">
                                                             <ui:define name="label">#{messages.lblCompanyType}<h:outputText
                                                                       value="*" class="asterik" />
                                                             </ui:define>
                                                             <h:selectOneMenu value="#{companyMaster.companyType}">
                                                                  <s:selectItems value="#{companyTypes.resultList}" var="types"
                                                                       label="#{types.strType}"
                                                                       noSelectionLabel="#{messages.defaultListItem}" />
                                                                  <s:convertEntity />
                                                             </h:selectOneMenu>
                                                        </s:decorate>
                                                        <h:outputText rendered="#{companyMaster.icompanyId == '1'}" />
                                                   </h:panelGrid>
                
                <a:commandButton id="updateCompanyButton"
                                                             value="#{messages.btnUpdate}"
                                                             onmouseover="reloadHelp('#{messages.hlpUpdateCompany}');"
                                                             onmouseout="reloadHelp('#{messages.hlpCompanyPage}');"
                                                             reRender="commonPanel"
                                                             action="#{manageCompany.updateCompanyDetails}"
                                                             style="margin-left: 3px" onclick="this.disabled=true"
                                                             oncomplete="this.disabled=false"
                                                             rendered="#{companyMaster.icompanyId != null}" ignoreDupResponses="true" 
                                                             />     



                Now I click on the image to open a modal panel , then left the companyName field as blank and press the update button of modal panel , a message displays company name is required. Now i close the modal panel but the datable shows blank companyName. But if i refresh the page then datatable again display the previous value not any blank value.


                Thanks


                Ambrish



                • 5. Re: Validation Inside Modal Panel
                  Damian Harvey Apprentice

                  That's because the model is being updated with the new blank value of the company name.


                  How is the validation of the Company Name done? Is it an annotation on the Entity (eg. @NotNull) or have you written some code for it in the updateCompanyDetails() method?


                  You don't have required=true on your inputText.

                  • 6. Re: Validation Inside Modal Panel
                    Ambrish Singh Newbie

                    Hi Damian ,


                    Thanks for your consistent replies.


                    My problem is solved by using required attribute.


                    Is there any other way of doing the same. So that the modal panel value is not updated.


                    Thanks


                    Ambrish