5 Replies Latest reply on Dec 17, 2010 7:20 AM by nokos

    Chrome and Safari dont like this construct...

    tony.herstell1

      I needed a construct to show/hide parts of page in a nice usable way (nice effect etc).

      Had to encode a UID on front of method name as RF does not give each occurance a unique id (why?).

      So...

       

      Given decorator (used a few times on 1 page):

       

      <s:decorate template="/WEB-INF/pages/showHideArea.xhtml">
                          <ui:param name="startOpen" value="false" />
                          <ui:param name="UID" value="products" />
                          <ui:define name="leaderText">Licensed Products</ui:define>
                          <ui:define name="contentText">

       

                             Blah blah blah

       

                          </ui:define>

      </s:decorate>

       

       

      Using decorator template showHideArea.xhtml:

       

      <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:s="http://jboss.com/products/seam/taglib" xmlns:a4j="http://richfaces.org/a4j"
          xmlns:rich="http://richfaces.org/rich" >
         
              <table>
                  <tr>
                      <td>
                          <h3>
                              <ui:insert name="leaderText"/>
                          </h3>
                      </td>
                      <td>
                          <s:div id="#{UID}showButton" style="#{startOpen ? 'display: none;' : ''}">
                              <input type="button" value="Show" onclick="#{UID}_showContentDiv(); #{UID}_hideShowButton()" />
                          </s:div>
                      </td>
                  </tr>
              </table>

       

              <div id="#{UID}contentArea" style="#{startOpen ? '' : 'display: none;'}">

       

                  <ui:insert name="contentText"/>

       

                  <input type="button" value="Hide" onclick="#{UID}_hideContentDiv(); #{UID}_showShowButton()"/>
              </div>

       

              <rich:effect for="#{UID}contentArea" name="#{UID}_showContentDiv" type="BlindDown" />
              <rich:effect for="#{UID}contentArea" name="#{UID}_hideContentDiv" type="BlindUp" />
              <rich:effect for="#{UID}showButton" name="#{UID}_showShowButton" type="Appear" />
              <rich:effect for="#{UID}showButton" name="#{UID}_hideShowButton" type="Fade" />

       

      </ui:composition>

       

       

      This works fine in FF and IE

       

      But Chrome and Safare Bawlk!

       

       

       

      1. Uncaught ReferenceError: params is not defined
        1. (anonymous function):1
        2. (anonymous function)

       

      if(!window.Richfaces){window.Richfaces={};}
      Richfaces.processEffect=function(params){new Effect[params.type]($(params.targetId),params);};Richfaces.effectEventOnOut=function(ename){return ename.substr(0,2)=='on'?ename.substr(2):ename;};if(!Richfaces.effect){Richfaces.effect={};}
      Richfaces.effect.create=function(options){if(!options)options={};var params=options.params||{};options.params=null;var attachObj;var targetObj;var targetId=options.targetId;var attachId=options.attachId;if(options.attachObj){try{attachObj=eval(options.attachObj);}catch(e){}
      if(typeof attachObj=='object'){attachId=attachObj;}}
      if(options.targetObj){try{targetObj=eval(options.targetObj);}catch(e){}
      if(typeof targetObj=='object')targetId=targetObj;}
      if(!targetId)targetId=attachId;if(!params.targetId)params.targetId=targetId;params.type=options.type;if(!options.event){with(window){eval(options.name+"=function(){return Richfaces.processEffect(Object.extend(this,arguments[0]||{}));}.bind(params)");}}else{var ename=Richfaces.effectEventOnOut(options.event||"");if(ename){var bindedFunction=function(event){return Richfaces.processEffect(this);}.bindAsEventListener(params);Event.observe(attachId,ename,bindedFunction,params.useCapture||false);}}}

       

      Presing one of buttons on page causes

      1. Uncaught ReferenceError: services_showContentDiv is not defined
        1. (anonymous function)home.seam:125
        2. onclick

       

       

      Any ideas?

        • 1. Re: Chrome and Safari dont like this construct...
          tony.herstell1

          ?? why the CDATA?

           

                      <input type="button" value="Hide" onclick="testimonials_hideContentDiv(); testimonials_showShowButton()" />
                  </div><script type="text/javascript">
          //<![CDATA[
          Richfaces.effect.create({'name':'testimonials_showContentDiv','attachObj':'testimonialscontentArea','params':{},'type':'BlindDown','attachId':'testimonialscontentArea'} )
          //]]>
          </script><script type="text/javascript">
          //<![CDATA[
          Richfaces.effect.create({'name':'testimonials_hideContentDiv','attachObj':'testimonialscontentArea','params':{},'type':'BlindUp','attachId':'testimonialscontentArea'} )
          //]]>
          </script><script type="text/javascript">
          //<![CDATA[
          Richfaces.effect.create({'name':'testimonials_showShowButton','params':{},'type':'Appear','attachId':'template_rounded_corner_decorator:testimonials_template_rounded_corner_decorator:j_id168:testimonialsshowButton'} )
          //]]>
          </script><script type="text/javascript">
          //<![CDATA[
          Richfaces.effect.create({'name':'testimonials_hideShowButton','params':{},'type':'Fade','attachId':'template_rounded_corner_decorator:testimonials_template_rounded_corner_decorator:j_id168:testimonialsshowButton'} )
          //]]>

          • 2. Re: Chrome and Safari dont like this construct...
            tony.herstell1

            in FF (Firebug)

             

             

            <input type="button" value="Hide" onclick="testimonials_hideContentDiv(); testimonials_showShowButton()" />

            729 </div><script  type="text/javascript">Richfaces.effect.create({'name':'testimonials_showContentDiv','attachObj':'testimonialscontentArea','params':{},'type':'BlindDown','attachId':'testimonialscontentArea'}  )</script><script  type="text/javascript">Richfaces.effect.create({'name':'testimonials_hideContentDiv','attachObj':'testimonialscontentArea','params':{},'type':'BlindUp','attachId':'testimonialscontentArea'}  )</script><script  type="text/javascript">Richfaces.effect.create({'name':'testimonials_showShowButton','params':{},'type':'Appear','attachId':'template_rounded_corner_decorator:testimonials_template_rounded_corner_decorator:j_id168:testimonialsshowButton'}  )</script><script  type="text/javascript">Richfaces.effect.create({'name':'testimonials_hideShowButton','params':{},'type':'Fade','attachId':'template_rounded_corner_decorator:testimonials_template_rounded_corner_decorator:j_id168:testimonialsshowButton'}  )</script></div>
            730 </div>
            731 </div>
            • 3. Re: Chrome and Safari dont like this construct...
              ilya_shaikovsky
              • 4. Re: Chrome and Safari dont like this construct...
                tony.herstell1

                Any workarounds?

                • 5. Re: Chrome and Safari dont like this construct...
                  nokos

                  this did it for me:

                   

                  --- ui/effect/src/main/resources/org/richfaces/renderkit/html/script/processEffect.js    2010-10-17 01:49:18.434347063 +0100
                  +++ ui/effect/src/main/resources/org/richfaces/renderkit/html/script/processEffect.js    2010-04-06 19:57:23.000000000 +0200
                  @@ -61,7 +61,7 @@
                       if (!options.event) {
                           // create user function
                           with (window) {
                  -            eval(options.name + "=function(){return  Richfaces.processEffect(Object.extend(this,arguments[0]||{}));}.bind(params)");  // ?? or just use params instead of this and binding

                  +            window[options.name]=function(){return Richfaces.processEffect(Object.extend(this,arguments[0]||{}));}.bind(params); // ?? or just use params instead of this and binding
                           }
                       } else {
                           // attach eventListener