3 Replies Latest reply on Oct 13, 2009 2:37 PM by H G

    rich:effect invoking from javascript

    H G Newbie

      Hi,

      I'm using rich:effect invoked from javascript - hiding with fade a transparent div. That work well in FireFox 3.5.3 and IE8.

      The problem is on Opera (tested with 9.22, 10) and Google Chrome 2.0.172.39. The fade effect never occurs. I tested first on a:support -oncomplete in orderingList, after that with a button onclick event but doesn't work. If I put alert('some text') after calling the effect, the alert is raised, but If the alert is after javascript calling function is never raised. So there is some problem in the javascript of effect for Opera and Chrome.

      If I'm using the effect attached by event in a rich:panel this work also well.

      There is a some solution?

      I'm using richfaces 3.3.2 with facelets, Seam 2.1.2, JBoss as 5.1

        • 1. Re: rich:effect invoking from javascript
          Ilya Shaikovsky Master

          please add code snippets.

          • 2. Re: rich:effect invoking from javascript
            H G Newbie

             

            <!DOCTYPE html 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:ui="http://java.sun.com/jsf/facelets"
             xmlns:f="http://java.sun.com/jsf/core"
             xmlns:h="http://java.sun.com/jsf/html"
             xmlns:c="http://java.sun.com/jstl/core"
             xmlns:s="http://jboss.com/products/seam/taglib"
             xmlns:rich="http://richfaces.org/rich"
             xmlns:a="http://richfaces.org/a4j">
            
            <div style="position:absolute; left:0; top:0; z-index:5;" id="slideDevices">
            <rich:panel>
             <table border="0" cellpadding="0" cellspacing="0">
             <tr>
             <td height="10" style="background: transparent url(img/rounded/0.png)"> </td>
             <td width="10"><img src="img/rounded/45.png" width="10" height="10" alt="" /></td>
            
             </tr>
             <tr>
             <td style="background: transparent url(img/rounded/0.png); padding-left:10px;">
             <a:region>
             <rich:tabPanel id="tpDevices" width="180" switchType="ajax" headerSpacing="4">
             <rich:tab label="Online">
             <a:form>
             <rich:orderingList id="olOnlineDevices" value="#{online}"
             var="_deviceOnline" listWidth="180"
             converter="deviceConverter" activeItem="#{aDevice.activeItem}"
             selection="#{aDevice.selected}"
             controlsType="none">
             <rich:column width="180">
             <h:outputText value="#{_deviceOnline.name}"></h:outputText>
             </rich:column>
             <a:support event="onclick" action="#{aDevice.selectDevice}"
             reRender="olOnlineDevices, olOfflineDevices, olRoutes, olRouteGroups"
             oncomplete="hideSlideDevices({duration:1.0});" />
             </rich:orderingList>
             </a:form>
             </rich:tab>
             <rich:tab label="Offline">
             <a:form>
             <rich:orderingList id="olOfflineDevices" value="#{offline}"
             var="_deviceOffline" listWidth="180"
             converter="deviceConverter" activeItem="#{aDevice.activeItem}"
             selection="#{aDevice.selected}"
             controlsType="none">
             <rich:column width="180">
             <h:outputText value="#{_deviceOffline.name}"></h:outputText>
             </rich:column>
             <a:support event="onclick" action="#{aDevice.selectDevice}"
             reRender="olOfflineDevices, olOnlineDevices, olRoutes, olRouteGroups"
             oncomplete="hideSlideDevices({duration:1.0});showSlideRoutes()" />
             </rich:orderingList>
            
             </a:form>
             </rich:tab>
             </rich:tabPanel>
             </a:region>
            
            
             </td>
             <td width="10" style="background: transparent url(img/rounded/0.png)"> </td>
             </tr>
             <tr>
             <td height="10" style="background: transparent url(img/rounded/0.png)"> </td>
             <td width="10"><img src="img/rounded/315.png" width="10" height="10" alt="" /></td>
             </tr>
             </table>
             </rich:panel>
            </div>
            <rich:effect name="hideSlideDevices" for="slideDevices" type="Fade"/>
            <rich:effect name="showSlideDevices" for="slideDevices" type="Appear" params="delay:1.0,duration:1.0" />
            
            </ui:composition>


            • 3. Re: rich:effect invoking from javascript
              H G Newbie

               

              <!DOCTYPE html 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:ui="http://java.sun.com/jsf/facelets"
               xmlns:f="http://java.sun.com/jsf/core"
               xmlns:h="http://java.sun.com/jsf/html"
               xmlns:c="http://java.sun.com/jstl/core"
               xmlns:s="http://jboss.com/products/seam/taglib"
               xmlns:rich="http://richfaces.org/rich"
               xmlns:a="http://richfaces.org/a4j">
              
              <div style="position:absolute; left:0; top:0; z-index:5;" id="slideDevices">
              <rich:panel>
               <table border="0" cellpadding="0" cellspacing="0">
               <tr>
               <td height="10" style="background: transparent url(img/rounded/0.png)"> </td>
               <td width="10"><img src="img/rounded/45.png" width="10" height="10" alt="" /></td>
              
               </tr>
               <tr>
               <td style="background: transparent url(img/rounded/0.png); padding-left:10px;">
               <a:region>
               <rich:tabPanel id="tpDevices" width="180" switchType="ajax" headerSpacing="4">
               <rich:tab label="Online">
               <a:form>
               <rich:orderingList id="olOnlineDevices" value="#{online}"
               var="_deviceOnline" listWidth="180"
               converter="deviceConverter" activeItem="#{aDevice.activeItem}"
               selection="#{aDevice.selected}"
               controlsType="none">
               <rich:column width="180">
               <h:outputText value="#{_deviceOnline.name}"></h:outputText>
               </rich:column>
               <a:support event="onclick" action="#{aDevice.selectDevice}"
               reRender="olOnlineDevices, olOfflineDevices, olRoutes, olRouteGroups"
               oncomplete="hideSlideDevices({duration:1.0});" />
               </rich:orderingList>
               </a:form>
               </rich:tab>
               <rich:tab label="Offline">
               <a:form>
               <rich:orderingList id="olOfflineDevices" value="#{offline}"
               var="_deviceOffline" listWidth="180"
               converter="deviceConverter" activeItem="#{aDevice.activeItem}"
               selection="#{aDevice.selected}"
               controlsType="none">
               <rich:column width="180">
               <h:outputText value="#{_deviceOffline.name}"></h:outputText>
               </rich:column>
               <a:support event="onclick" action="#{aDevice.selectDevice}"
               reRender="olOfflineDevices, olOnlineDevices, olRoutes, olRouteGroups"
               oncomplete="hideSlideDevices({duration:1.0});showSlideRoutes()" />
               </rich:orderingList>
              
               </a:form>
               </rich:tab>
               </rich:tabPanel>
               </a:region>
              
              
               </td>
               <td width="10" style="background: transparent url(img/rounded/0.png)"> </td>
               </tr>
               <tr>
               <td height="10" style="background: transparent url(img/rounded/0.png)"> </td>
               <td width="10"><img src="img/rounded/315.png" width="10" height="10" alt="" /></td>
               </tr>
               </table>
               </rich:panel>
              </div>
              <rich:effect name="hideSlideDevices" for="slideDevices" type="Fade"/>
              <rich:effect name="showSlideDevices" for="slideDevices" type="Appear" params="delay:1.0,duration:1.0" />
              
              </ui:composition>