4 Replies Latest reply on Jun 19, 2009 11:18 AM by rajesha Indurthi

    Error using rich:togglePanel

    rajesha Indurthi Newbie

      Hi there,
      Iam trying to use rich:togglePanel in my application. The code snippet that Iam using is as below :

      <rich:togglePanel switchType="client" stateOrder="closed,tip1" id="togglePanel">
       <f:facet name="closed">
       <rich:toggleControl>
       <h:graphicImage id="togglePic" style="border-width:0" value="/images/tag.JPG" />
       </rich:toggleControl>
       </f:facet>
       <f:facet name="tip1">
       <h:panelGroup id="tip1Panel">
       <h:panelGrid columns="1" border="0">
      
       <h:outputText id="outputTip" value="This is tip 1" />
       <rich:toggleControl value="x Close" switchToState="closed" styleClass="nav" />
       </h:panelGrid>
       </h:panelGroup>
       </f:facet>
       </rich:togglePanel>


      When the page is rendered the tag.jsp is rendered properly, when I click the image the toggle panle opens with the text "This is tip 1". However when I close the toggle panel by clicking the close toggle control the tag.jsp vanishes from the page and I get the following javascript error in the fire fox error console :

      $(element) is null , and it is pointing to the appName/a4j.res/prototype.js.faces file, to line number 93 .
      The line has the following code:

      element._extended=true;return element;};Element.extend.cache={findOrStore:function(value){return this[value]=this[value]||function(){return value.apply(null,[this].concat($A(arguments)));}}};Element.Methods={visible:function(element){return $(element).style.display!='none';},toggle:function(element){element=$(element);Element[Element.visible(element)?'hide':'show'](element);return element;},hide:function(element){$(element).style.display='none';return element;},show:function(element){$(element).style.display='';return element;},remove:function(element){element=$(element);element.parentNode.removeChild(element);return element;},update:function(element,html){html=typeof html=='undefined'?'':html.toString();$(element).innerHTML=html.stripScripts();setTimeout(function(){html.evalScripts()},10);return element;},replace:function(element,html){element=$(element);html=typeof html=='undefined'?'':html.toString();if(element.outerHTML){element.outerHTML=html.stripScripts();}else{var range=element.ownerDocument.createRange();range.selectNodeContents(element);element.parentNode.replaceChild(range.createContextualFragment(html.stripScripts()),element);}


      your help is highly appreciated, Iam kinda clueless as to what is happening.



        • 1. Re: Error using rich:togglePanel
          rajesha Indurthi Newbie

          after a bit of debugging I found out that the $(element) is null error is being thrown at the line which is in bold in the following javascript code :

          if (!window.Element)
           var Element = new Object();
          
          Element.extend = function(element) {
           if (!element || _nativeExtensions || element.nodeType == 3) return element;
          
           if (!element._extended && element.tagName && element != window) {
           var methods = Object.clone(Element.Methods), cache = Element.extend.cache;
          
           if (element.tagName == 'FORM')
           Object.extend(methods, Form.Methods);
           if (['INPUT', 'TEXTAREA', 'SELECT'].include(element.tagName))
           Object.extend(methods, Form.Element.Methods);
          
           Object.extend(methods, Element.Methods.Simulated);
          
           for (var property in methods) {
           var value = methods[property];
           if (typeof value == 'function' && !(property in element))
           element[property] = cache.findOrStore(value);
           }
           }
          
           element._extended = true;
           return element;
          };


          This is in the prototye.js in the ajax4jsf-1.1.0.jar.Looking forward to hear from you.

          • 2. Re: Error using rich:togglePanel
            rajesha Indurthi Newbie

            Hi there,
            Iam looking for your help here.

            • 3. Re: Error using rich:togglePanel
              Nick Belaevski Master

              Hi,

              This may be a conflict in JavaScript libraries versions. Are you adding any of them explicitly to your page?

              • 4. Re: Error using rich:togglePanel
                rajesha Indurthi Newbie

                HI there,
                I used the simpleTogglePanle instaed of the toggle panel and the component woked just fine for me. So Iam using rich:simpleTOgglePanel instaedof the togglePanle and it issufficient for my requirements. Thanks for your advise.