3 Replies Latest reply on Aug 16, 2010 6:35 AM by Flavio Palumbo

    modalPanel problem with IE

    Flavio Palumbo Newbie

      Hi all,

      i use a modalPanel to edit data from an extendedDataTable.

      This process works fine on IE8 only if i set the attribute autosized of the modalPanel to true.

      If i try to set other attributes like width, height or resizable=true, all i get is an empty modalPanel.

      On firefox everything works fine and i can set all the attributes mentioned as i prefer and all the changes are immediately reflected in the browser.

      I work with jdk1.6 richfaces 3.3.3 tomcat 6.0.20.

      Can somebody help me ?

      Thanks a lot

      Flavio

        • 1. Re: modalPanel problem with IE
          Flavio Palumbo Newbie

          Sorry,

          i forgot the code.

          Here the datatable

           

           

          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
          <html xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:a4j="http://richfaces.org/a4j"
                xmlns:rich="http://richfaces.org/rich">

           

              <ui:composition>
                  <h:form id="ESBankform">
                      <rich:panel header="#{mess.bankTitleList}">
                          <!--                <h:panelGrid columns="2" columnClasses="top , top"> -->
                          <rich:extendedDataTable
                              value="#{eSBank.dataModel}" var="item" id="ESBankTable"
                              width="680px" height="450px"
                              sortMode="#{eSBank.sortMode}"
                              selectionMode="#{eSBank.selectionMode}"
                              tableState="#{eSBank.tableState}"
                              selection="#{eSBank.selection}">
                              <rich:column sortable="true" sortBy="#{item.a1id}" label="a1id"
                                           id="a1id_col">
                                  <f:facet name="header">
                                      <h:outputText value="#{mess.labelBankId}" id="a1id_hea"/>
                                  </f:facet>
                                  <h:outputText value="#{item.a1id}" id="a1id_fld"/>
                              </rich:column>
                              <rich:column sortable="true" sortBy="#{item.a1cdba}" id="a1cdba_col"
                                           filterBy="#{item.a1cdba}" filterEvent="onkeyup" width="120px"
                                           label="a1cdba">
                                  <f:facet name="header">
                                      <h:outputText value="#{mess.labelBankCod}" id="a1cdba_hea"/>
                                  </f:facet>
                                  <h:outputText value="#{item.a1cdba}" id="a1cdba_fld"/>
                              </rich:column>
                              <rich:column sortable="true" sortBy="#{item.a1deba}" id="a1deba_col"
                                           filterBy="#{item.a1deba}" filterEvent="onkeyup" width="210px"
                                           label="a1deba">
                                  <f:facet name="header">
                                      <h:outputText value="#{mess.labelBankDes}" id="a1deba_hea"/>
                                  </f:facet>
                                  <h:outputText value="#{item.a1deba}" id="a1deba_fld"/>
                              </rich:column>
                              <rich:column sortable="false" label="a1cdso" id="a1cdso_col">
                                  <f:facet name="header">
                                      <h:outputText value="#{mess.labelBankSoc}" id="a1cdso_hea"/>
                                  </f:facet>
                                  <h:outputText value="#{item.a1cdso}" id="a1cdso_fld"/>
                              </rich:column>
                              <rich:column sortable="false" label="a1user" id="a1user_col">
                                  <f:facet name="header">
                                      <h:outputText value="#{mess.labelUser}" id="a1user_hea"/>
                                  </f:facet>
                                  <h:outputText value="#{item.a1user}" id="a1user_fld"/>
                              </rich:column>
                              <rich:column sortable="false" label="a1usva" id="a1usva_col">
                                  <f:facet name="header">
                                      <h:outputText value="#{mess.labelUserVar}" id="a1usva_hea"/>
                                  </f:facet>
                                  <h:outputText value="#{item.a1usva}" id="a1usva_fld"/>
                              </rich:column>
                              <rich:column sortable="false" label="a1dtva" id="a1dtva_col">
                                  <f:facet name="header">
                                      <h:outputText value="#{mess.labelDataVar}" id="a1dtva_hea"/>
                                  </f:facet>
                                  <h:outputText value="#{item.a1dtva}" id="a1dtva_fld">
                                      <f:convertDateTime pattern="dd-MM-yyyy HH:mm:ss" />
                                  </h:outputText>
                              </rich:column>
                              <a4j:support id="extended_table_bean_take_selection"
                                           action="#{eSBank.takeSelection}"
                                           event="onselectionchange" />
                          </rich:extendedDataTable>
                          <ui:include src="/tables/eSBank/ESBankEdit.xhtml"/>
                          <!--            </h:panelGrid> -->
                          <rich:panel>
                              <h:commandLink action="eSBank.createSetup">
                                  <h:graphicImage url="/resources/images/nuovo.png" title="#{mess.tipInsert}"/>
                              </h:commandLink>
                              &emsp;
                              <!--                    <h:commandLink action="eSBank.editSetup" immediate="true"> -->
                              <a4j:commandLink reRender="ESBankEditOutPanel" ajaxSingle="true"
                                               action="#{eSBank.editSetup}"
                                               oncomplete="javascript:Richfaces.showModalPanel('ESBankEditPanel');" >
                                  <h:graphicImage url="/resources/images/edit.png" title="#{mess.tipEdit}"/>
                              </a4j:commandLink>
                              <!--                   </h:commandLink> -->
                              &emsp;
                              <h:commandLink action="eSBank.destroy" immediate="true">
                                  <h:graphicImage url="/resources/images/delete.png" title="#{mess.tipDelete}"/>
                              </h:commandLink>
                          </rich:panel>
                      </rich:panel>
                  </h:form>
              </ui:composition>

           

          </html>

           

          ... and here is the called modalPanel.

           

          <html xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:a4j="http://richfaces.org/a4j"
                xmlns:rich="http://richfaces.org/rich">

           


              <ui:composition>
                  <rich:modalPanel id="ESBankEditPanel" width="350" height="450" resizeable="true">
                      <f:facet name="header">
                          <h:outputText value="Selected Rows"/>
                      </f:facet>
                      <f:facet name="controls">
                          <span style="cursor:pointer" onclick="javascript:Richfaces.hideModalPanel('ESBankEditPanel')">X</span>
                      </f:facet>
                      <!--    <div style="height: 500px; width: 450px; overflow: auto; "> -->
                      <h:form>
                          <a4j:outputPanel id="ESBankEditOutPanel" >
                              <h:panelGrid columns="2">
                                  <h:outputText value="#{mess.labelBankId}"/>
                                  <h:outputText value="#{eSBank.ESBank.a1id}" title="A1id" />
                                  <h:outputText value="#{mess.labelUser}"/>
                                  <h:inputText id="a1user" value="#{eSBank.ESBank.a1user}" title="A1user" required="true" requiredMessage="The a1user field is required." />
                                  <h:outputText value="#{mess.labelBankCod}"/>
                                  <h:inputText id="a1cdba" value="#{eSBank.ESBank.a1cdba}" title="A1cdba" required="true" requiredMessage="The a1cdba field is required." />
                                  <h:outputText value="#{mess.labelBankSoc}"/>
                                  <h:inputText id="a1cdso" value="#{eSBank.ESBank.a1cdso}" title="A1cdso" required="true" requiredMessage="The a1cdso field is required." />
                                  <h:outputText value="#{mess.labelBankDes}"/>
                                  <h:inputText id="a1deba" value="#{eSBank.ESBank.a1deba}" title="A1deba" required="true" requiredMessage="The a1deba field is required." />
                                  <h:outputText value="#{mess.labelBankImpFiCC}"/>
                                  <h:inputText id="a1pcmo" value="#{eSBank.ESBank.a1pcmo}" title="A1pcmo" />
                                  <h:outputText value="#{mess.labelBankSpoFiCC}"/>
                                  <h:inputText id="a1pcim" value="#{eSBank.ESBank.a1pcim}" title="A1pcim" />
                                  <h:outputText value="#{mess.labelBankClImpFiCC}"/>
                                  <h:inputText id="a1clci" value="#{eSBank.ESBank.a1clci}" title="A1clci" />
                                  <h:outputText value="#{mess.labelBankClCalCC}"/>
                                  <h:inputText id="a1clcr" value="#{eSBank.ESBank.a1clcr}" title="A1clcr" />
                                  <h:outputText value="#{mess.labelBankClCanStoCC}"/>
                                  <h:inputText id="a1clcc" value="#{eSBank.ESBank.a1clcc}" title="A1clcc" />
                                  <h:outputText value="#{mess.labelBankImpFiTT}"/>
                                  <h:inputText id="a1ptmo" value="#{eSBank.ESBank.a1ptmo}" title="A1ptmo" />
                                  <h:outputText value="#{mess.labelBankSpoFiTT}"/>
                                  <h:inputText id="a1ptim" value="#{eSBank.ESBank.a1ptim}" title="A1ptim" />
                                  <h:outputText value="#{mess.labelBankClImpFiTT}"/>
                                  <h:inputText id="a1clti" value="#{eSBank.ESBank.a1clti}" title="A1clti" />
                                  <h:outputText value="#{mess.labelBankClCalTT}"/>
                                  <h:inputText id="a1cltr" value="#{eSBank.ESBank.a1cltr}" title="A1cltr" />
                                  <h:outputText value="#{mess.labelBankClCanStoTT}"/>
                                  <h:inputText id="a1cltc" value="#{eSBank.ESBank.a1cltc}" title="A1cltc" />
                              </h:panelGrid>
                              <br />
                              <h:commandLink action="#{ESBank.destroy}" value="Destroy">
                                  <f:param name="jsfcrud.currentESBank" value="#{jsfcrud_class['bean.util.JsfUtil'].jsfcrud_method['getAsConvertedString'][eSBank.ESBank][eSBank.converter].jsfcrud_invoke}" />
                              </h:commandLink>
                              <br />
                              <br />
                              <h:commandLink action="#{ESBank.editSetup}" value="Edit">
                                  <f:param name="jsfcrud.currentESBank" value="#{jsfcrud_class['bean.util.JsfUtil'].jsfcrud_method['getAsConvertedString'][eSBank.ESBank][eSBank.converter].jsfcrud_invoke}" />
                              </h:commandLink>
                              <br />
                              <h:commandLink action="#{ESBank.createSetup}" value="New ESBank" />
                              <br />
                              <h:commandLink action="#{ESBank.listSetup}" value="Show All ESBank Items"/>
                              <br />
                          </a4j:outputPanel>
                      </h:form>
                      <!-- </div> -->
                  </rich:modalPanel>
              </ui:composition>
          </html>

          • 2. Re: modalPanel problem with IE
            Rob Acraman Newbie

            I'm not sure why the Autosized  would make any difference, but it does look like you've got a case of nested forms.  Whenever I hear "modal panels" and "works in Firefox but not IE", that's always the first thing I look for - and sure enough you have  :

             

            - the ESBankForm in the top file, which spans the whole page, and

            - the modal panel's form inside the included file.

             

            Try moving the ui:include out of the form in your first page.

            • 3. Re: modalPanel problem with IE
              Flavio Palumbo Newbie

              That was ;-)

              Thanks for your suggestion.