3 Replies Latest reply on Mar 5, 2008 12:26 AM by Smokin' Hobi

    modalPanel doesn't work in 3.1.4 on Firefox

    Todd Nash Newbie

      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>
      


        • 1. Re: modalPanel doesn't work in 3.1.4 on Firefox
          Todd Nash Newbie

          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>
          


          • 2. Re: modalPanel doesn't work in 3.1.4 on Firefox
            Smokin' Hobi Newbie

            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

            • 3. Re: modalPanel doesn't work in 3.1.4 on Firefox
              Smokin' Hobi Newbie

              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