Validation Inside Modal Panel

[ambrish_kumar]

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

[damianharvey.damianharvey.gmail.com]

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

[ambrish_kumar]

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

[damianharvey.damianharvey.gmail.com]

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

Cheers,

Damian.

[ambrish_kumar]

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

[damianharvey.damianharvey.gmail.com]

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.

[ambrish_kumar]

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