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

modalPanel problem with IE

flavioeasy Aug 13, 2010 5:15 AM

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

flavioeasy Aug 13, 2010 8:20 AM (in response to flavioeasy)

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}">
                
                <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"/>
                
                <rich:panel>
                    <h:commandLink action="eSBank.createSetup">
                        <h:graphicImage url="/resources/images/nuovo.png" title="#{mess.tipInsert}"/>
                    </h:commandLink>
                    &emsp;
                    
                    <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>
                    
                    &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>
            
            <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>
            
        </rich:modalPanel>
    </ui:composition>
</html>
Actions
2. Re: modalPanel problem with IE

ufonaut Aug 15, 2010 8:24 PM (in response to flavioeasy)

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.
Actions
3. Re: modalPanel problem with IE

flavioeasy Aug 16, 2010 6:35 AM (in response to ufonaut)

That was ;-)
Thanks for your suggestion.
Actions

Go to original post