Error using rich:togglePanel

[rajeshiv]

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.

[rajeshiv]

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.

[rajeshiv]

Hi there,
Iam looking for your help here.

[nbelaevski]

Hi,

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

[rajeshiv]

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.