modalPanel doesn't work in 3.1.4 on Firefox

[todd.nash]

We attempted to upgrade to 3.1.4 only to find that none of our modal panels worked anymore. We have only tested this on firefox, to date.

Our aplication uses Seam 2.0.1GA on JBoss 4.2.2.

I created a simple page with a modal panel for someone to test.

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

 <a4j:loadStyle src="/stylesheet/er2.css"/>

 <ui:define name="body">

 <rich:panel headerClass="sub_portlet_header" styleClass="sub_portlet_header">
 <f:facet name="header">
 <h:outputText value="Modal Panel Example"/>
 </f:facet>

 <rich:panel>
 <f:facet name="header">
 <h:panelGroup>
 <h:outputText id="portletTitle_expanded" value="#{PortletManager.documentListTitle}"
 style="font-weight: bold;"/>
 </h:panelGroup>
 </f:facet>

 <h:panelGrid columns="1" style="width: 300px;">
 <rich:panel headerClass="portlet_header" styleClass="rich-panel-body">
 <f:facet name="header">
 <h:outputText value="ER recommends you upload the following documents:"/>
 </f:facet>
 <rich:panel headerClass="sub_portlet_header_ppt" styleClass="rich_panel_no_border">
 <a4j:form id="recommendedDocumentsForm">
 <h:panelGrid columns="1">
 <s:formattedText value=" "/>
 <ui:repeat var="recommendedDocument" value="#{RecommendedDocumentList.resultList}">
 <h:panelGroup>
 <s:link value="#{recommendedDocument.title}"
 view="/documents/#{recommendedDocument.viewPage}.xhtml"
 style="text-decoration: none; text-align: right; width: 100%; padding-right: 5px;">
 <f:param name="recommendedDocumentId" value="#{recommendedDocument.id}"/>
 <f:param name="title" value="#{recommendedDocument.title}"/>
 </s:link>
 - Click here to add<br/>
 </h:panelGroup>
 </ui:repeat>
 </h:panelGrid>
 </a4j:form>

 <s:formattedText value=" "/>
 <h:panelGrid styleClass="centeredButtonPanel"
 cellpadding="0" cellspacing="0" width="100%">
 <f:verbatim>
 <a href="javascript:Richfaces.showModalPanel('birthcertpanel',{left:'auto', top:'auto'})">
 Add New Document</a>
 </f:verbatim>
 </h:panelGrid>
 </rich:panel>
 </rich:panel>
 </h:panelGrid>
 </rich:panel>

 <h:panelGroup>
 <!-- Define javascript method for invoking the modal panel -->
 <f:verbatim>
 <a href="javascript:Richfaces.showModalPanel('birthcertpanel',{left:'auto', top:'auto'})">Show Modal Panel (via javascript)</a>
 </f:verbatim>
 <!--- End modal panel invocation link -->


 </h:panelGroup>
 <ui:include src="birthCertificatePanel.xhtml"/>

 </rich:panel>

 </ui:define>

</ui:composition>

[todd.nash]

I presented the wrong example. Here is the simple example to test:

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

 <a4j:loadStyle src="/stylesheet/er2.css" />

 <!--- Note: The exact wrapper is VERY important -->
 <ui:define name="body">

 <h:form id="_form">

 <rich:panel headerClass="sub_portlet_header" styleClass="sub_portlet_header">
 <f:facet name="header">
 <h:outputText value="Modal Panel Example"/>
 </f:facet>


 <h:panelGroup>
 <!-- Define javascript method for invoking the modal panel -->
 <f:verbatim>
 <a href="javascript:Richfaces.showModalPanel('_form:_panel',{left:'auto', top:'auto'})">Show Modal
 Panel (via javascript)</a>
 </f:verbatim>
 <!--- End modal panel invocation link -->


 </h:panelGroup>

 <!-- Define the modal panel -->
 <rich:modalPanel id="_panel" minHeight="200" minWidth="450" height="200" width="500" zindex="999">

 <f:facet name="header">
 <h:outputText value="Modal Panel Title"/>
 </f:facet>
 <f:facet name="controls">
 <h:panelGroup>
 <h:graphicImage value="../images/x_d.gif" style="cursor:pointer"
 onclick="Richfaces.hideModalPanel('_form:_panel')"/>

 <f:verbatim>
 <a href="javascript:Richfaces.hideModalPanel('_form:_panel')">Hide Panel (via javascript)</a>
 </f:verbatim>
 <br/>

 <h:graphicImage value="/images/x_d.gif" style="cursor:pointer" id="hidelinkimage"/>
 <rich:componentControl for="_panel" attachTo="hidelinkimage" operation="hide" event="onclick"/>

 </h:panelGroup>
 </f:facet>

 </rich:modalPanel>
 <!--- End modal panel definition -->
 </rich:panel>
 </h:form>

 <!--- End Wrapper -->
 </ui:define>
 <!--- End Wrapper -->

</ui:composition>

[hobione2007]

I have a modal panel and it's working for me in IE6, IE7 and Mozilla, I am calling modal panel body onload.

<ui:composition 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">



 <script>
 function getRightTop(ref) {
 var position = new Object();
 position.top = 0; //ref.offsetTop;
 position.left =0; // ref.offsetLeft+ref.clientWidth+6;
 return position;
 }

 </script>
 <body onload="javascript:Richfaces.showModalPanel('mp',{width:200, top:200})" bgcolor="black">
 <rich:modalPanel id="mp" minHeight="200" minWidth="450" height="220" width="500" zindex="2000">
 <f:facet name="header">
 <h:outputText value="NASED DBS" />
 </f:facet>

 <f:facet name="controls">
 <h:graphicImage value="images/ajax/close.png" style="cursor:pointer" onclick="Richfaces.hideModalPanel('mp')" />
 </f:facet>

 <h:form>
 <table border="0">
 <caption> <h:outputText id="title" value="DMS Login" /></caption>
 <tr>
 <td><h:outputLabel value="User ID:" /> </td>
 <td>
 <h:inputText id="userID" value="" label="" onclick="" />
 <h:message for="userID" errorClass="errors" />
 </td>
 </tr>
 <tr>
 <td><h:outputLabel value="Password:" /> </td>
 <td>
 <h:inputText id="password" value="" label="" onclick="" />
 <h:message for="password" errorClass="errors" />
 </td>
 </tr>
 <tr>
 <td><h:outputLabel value="Application:" /> </td>
 <td>
 <h:inputText id="application" value="" label="" onclick="" />
 <h:message for="application" errorClass="errors" />
 </td>
 </tr>
 <tr>
 <td><h:outputLabel value="Server" /> </td>
 <td>
 <h:selectOneMenu id="server" value="" label="" onclick="">
 <f:selectItem itemValue="dmsProd" itemLabel="DMS PROD" />
 <f:selectItem itemValue="dev9" itemLabel="DEV9" />
 </h:selectOneMenu>

 </td>
 </tr>
 <tr>
 <td colspan="2" align="center">
 <h:commandButton value=" OK " action="success"/>
 <a4j:commandButton value="Cancel" onclick="javascript:Richfaces.hideModalPanel('mp')" immediate="true"/>
 </td>
 </tr>
 </table>
 </h:form>
 <rich:separator height="2" style="padding:10px 0" />
 </rich:modalPanel>
</body>
</ui:composition>

Hope this help
Thanks
Hobi
www.hobione.wordpress.com

[hobione2007]

I have a modal panel and it's working for me in IE6, IE7 and Mozilla, I am calling modal panel body onload.

<ui:composition 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">



 <script>
 function getRightTop(ref) {
 var position = new Object();
 position.top = 0; //ref.offsetTop;
 position.left =0; // ref.offsetLeft+ref.clientWidth+6;
 return position;
 }

 </script>
 <body onload="javascript:Richfaces.showModalPanel('mp',{width:200, top:200})" bgcolor="black">
 <rich:modalPanel id="mp" minHeight="200" minWidth="450" height="220" width="500" zindex="2000">
 <f:facet name="header">
 <h:outputText value="NASED DBS" />
 </f:facet>

 <f:facet name="controls">
 <h:graphicImage value="images/ajax/close.png" style="cursor:pointer" onclick="Richfaces.hideModalPanel('mp')" />
 </f:facet>

 <h:form>
 <table border="0">
 <caption> <h:outputText id="title" value="DMS Login" /></caption>
 <tr>
 <td><h:outputLabel value="User ID:" /> </td>
 <td>
 <h:inputText id="userID" value="" label="" onclick="" />
 <h:message for="userID" errorClass="errors" />
 </td>
 </tr>
 <tr>
 <td><h:outputLabel value="Password:" /> </td>
 <td>
 <h:inputText id="password" value="" label="" onclick="" />
 <h:message for="password" errorClass="errors" />
 </td>
 </tr>
 <tr>
 <td><h:outputLabel value="Application:" /> </td>
 <td>
 <h:inputText id="application" value="" label="" onclick="" />
 <h:message for="application" errorClass="errors" />
 </td>
 </tr>
 <tr>
 <td><h:outputLabel value="Server" /> </td>
 <td>
 <h:selectOneMenu id="server" value="" label="" onclick="">
 <f:selectItem itemValue="dmsProd" itemLabel="DMS PROD" />
 <f:selectItem itemValue="dev9" itemLabel="DEV9" />
 </h:selectOneMenu>

 </td>
 </tr>
 <tr>
 <td colspan="2" align="center">
 <h:commandButton value=" OK " action="success"/>
 <a4j:commandButton value="Cancel" onclick="javascript:Richfaces.hideModalPanel('mp')" immediate="true"/>
 </td>
 </tr>
 </table>
 </h:form>
 <rich:separator height="2" style="padding:10px 0" />
 </rich:modalPanel>
</body>
</ui:composition>

Hope this help
Thanks
Hobi
http://www.hobione.wordpress.com