Accordion/InfoPanel error when loaded twice

hello everybody

I'm loving Ext but I'm having some problems :(

Code:

This js is fired when the menu is loaded var result = Ajax.responseText; // JSP code that contains the DIV's menuDiv.innerHTML = result; LazyLoad.loadOnce([js]);

if I execute this code twice the menu get bugged like this.

http://img68.imageshack.us/img68/893/errorfv7.jpg

Each menu have a .JSP and a .JS file. How you can see, the HTML at the menu div is erased every time the menu is opened.
Seems that the js is messing the objs or something like that.

any idea?

thanks in advance!

One Accordion must be created only only on one page. The content of panels can be changed, loaded from server, etc., but if you create same object twice you get into troubles.

I thought I will need some king of singleton for my js, but u make me see the problem from another perspective...maybe if a use .destroy() and create the menus dynamic I'll have a solution..

thanks!

I'll post my code here ASAP!

[QUOTE=zaratine;48604]hello everybody

I'm loving Ext but I'm having some problems :(

Code:

This js is fired when the menu is loaded var result = Ajax.responseText; // JSP code that contains the DIV's menuDiv.innerHTML = result; LazyLoad.loadOnce([js]);

if I execute this code twice the menu get bugged like this.

http://img68.imageshack.us/img68/893/errorfv7.jpg

Each menu have a .JSP and a .JS file. How you can see, the HTML at the menu div is erased every time the menu is opened.
Seems that the js is messing the objs or something like that.

I have the same problem.but in ie is OK,in firefox 2.0 has this problem.
use this code:
Ext.onReady(
function()
);

Do you have a link where I could see this problem in action?

Example

Quote:

Originally Posted by jsakalos

Do you have a link where I could see this problem in action?

I do not have a link ,but i can give you some code like this:

Code:

<html> <head> <link rel="stylesheet" type="text/css" href="./resources/css/ext-all.css" /> <link rel="stylesheet" type="text/css" href="./accordion.css" /> <LINK id=theme href="./resources/css/xtheme-default.css" type=text/css rel=stylesheet> <script language="javascript" src="./yui-utilities.js"></script> <script language="javascript" src="./ext-yui-adapter.js"></script> <script language="javascript" src="./ext-all.js"></script> <script language="javascript" src="./Ext.ux.InfoPanel.js"></script> <script language="javascript" src="./Ext.ux.Accordion.js"></script> <script> function init(){ Ext.get('acc2-ct').innerHTML=''; Ext.BLANK_IMAGE_URL = './resources/images/default/s.gif'; var iconPath='icons/'; // create fitHeight accordion var acc2 = new Ext.ux.Accordion('acc2-body', { body: 'acc2-body' //, boxWrap: true //, wrapEl: 'acc2-wrap' , fitContainer: true , fitToFrame: true , fitHeight: true , initialHeight: 240 , desktop: 'center-accordions' // , animate: false }); // }}} // {{{ // add panels to fitHeight accordion acc2.add(new Ext.ux.InfoPanel('panel2-1', { icon: iconPath + 'calendar_view_month.png' // , autoScroll: true })); acc2.add(new Ext.ux.InfoPanel('panel2-2', { icon: iconPath + 'database_table.png' })); acc2.add(new Ext.ux.InfoPanel('panel2-3', { icon: iconPath + 'cart.png' })); acc2.add(new Ext.ux.InfoPanel('panel2-4', { icon: iconPath + 'email.png' })); acc2.add(new Ext.ux.InfoPanel('panel2-5', { icon: iconPath + 'feed.png' })); // }}} // {{{ } Ext.onReady(init); </script> </head> <body> <div style="float:right;width:100px;"> <INPUT TYPE="button" id="button" VALUE="Load twice" onclick="init();"> <INPUT TYPE="button" id="Ajax" value="Load Ajax" onclick="function (){ Ext.get('acc2-ct').load({ url:'Accordion.htm', scripts:true, text:'loading...' }); }" > </div> <DIV id=acc2-ct> <DIV id=acc2-wrap> <DIV id=acc2-body>  <DIV id=panel2-1> <DIV>Panel 2-1</DIV> <DIV> <DIV class=text-content> Morbi eros nunc, adipiscing vitae, adipiscing quis, feugiat ac, erat. Pellentesque auctor, ligula quis commodo egestas, urna risus luctus ante, nec rutrum tortor ante eget erat. Donec venenatis elit sed justo. </DIV> </DIV> </DIV> <DIV id=panel2-2> <DIV>Panel 2-2</DIV> <DIV> <DIV class=text-content> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce pellentesque. Duis fermentum metus nec nisl. Suspendisse potenti. Vivamus id nibh ut neque sollicitudin ullamcorper. Vivamus quis augue. </DIV> </DIV> </DIV> <DIV id=panel2-3> <DIV>Panel 2-3</DIV> <DIV> <DIV class=text-content> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce pellentesque. Duis fermentum metus nec nisl. Suspendisse potenti. Vivamus id nibh ut neque sollicitudin ullamcorper. Vivamus quis augue. </DIV> </DIV> </DIV> </DIV> <DIV id=panel2-4> <DIV>Panel 2-4</DIV> <DIV> <DIV class=text-content> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce pellentesque. Duis fermentum metus nec nisl. Suspendisse potenti. Vivamus id nibh ut neque sollicitudin ullamcorper. Vivamus quis augue. </DIV> </DIV> </DIV> </DIV> <DIV id=panel2-5> <DIV>Panel 2-5</DIV> <DIV> <DIV class=text-content> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce pellentesque. Duis fermentum metus nec nisl. Suspendisse potenti. Vivamus id nibh ut neque sollicitudin ullamcorper. Vivamus quis augue. </DIV> </DIV> </DIV> </DIV> </DIV> </DIV> </DIV> </body> </html>

I quite cannot get what is this.

There is no doctype; browser probably goes to quirks mode

Script tags do not have type attribute; language attribute is almost always ignored by non IE browsers.

Attributes of majority of tags are not quoted

You include adapters from some non-standard directory; are they included at all?

You have quite complex html markup in acc2-ct but in the first statement of the init() you are trying to clear it all. You don't clear it in fact as Ext.get returns Ext.Element and setting Ext.Element's property innerHTML to '' has no effect.

Result is that you create new Accrodions in the same container over and over. Even if you'd correctly set acc2-ct content to '' this is not going to work. Accordion is complex structure with a lot of event handlers, references, etc. and setting it's container's innerHTML to '' would lead at least to memory leaks.

I'd advice to learn more about html an Ext and then to choose much simpler task, e.g. How to integrate... part of Howto on the Accordion demo page.

That what you posted is never going to work.

I'm sorry for that code

:">I'm sorry for that code. I just point out the problem. it doesn't work .

Here is complete example , i tested in firefox2.0.0.5 And IE7 (windows server2003 sp2)

Code:

######Example Diredtory Structure######### (BaseDirectory) ----yui-utilities.js ----ext-yui-adapter.js ----ext-all.js ----Ext.ux.InfoPanel.js ----Ext.ux.Accordion.js ----accordion.css ----resources (ext resources directory) +---css +---xtheme-default.css +---ext-all.css ----icons (icons directory) ----Accordion.htm ----AjaxAccordion.htm ( load by Accordion.htm)

it has 2 htm pages.

Accordion.htm

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Accordion Example</title> <link rel="stylesheet" type="text/css" href="./resources/css/ext-all.css" /> <link rel="stylesheet" type="text/css" href="./accordion.css" /> <link rel=stylesheet type=text/css id=theme href="./resources/css/xtheme-default.css" > <script language="javascript" src="./yui-utilities.js"></script> <script language="javascript" src="./ext-yui-adapter.js"></script> <script language="javascript" src="./ext-all.js"></script> <script language="javascript" src="./Ext.ux.InfoPanel.js"></script> <script language="javascript" src="./Ext.ux.Accordion.js"></script> <script language="javascript"> Ext.onReady(function(){ Ext.BLANK_IMAGE_URL = './resources/images/default/s.gif'; var iconPath='icons/'; // create fitHeight accordion var acc2 = new Ext.ux.Accordion('acc2-ct', { body: 'acc2-body' , boxWrap: true , wrapEl: 'acc2-wrap' , fitContainer: true , fitToFrame: true , fitHeight: true , initialHeight: 240 // , animate: false }); // add panels to fitHeight accordion acc2.add(new Ext.ux.InfoPanel('panel2-1', { icon: iconPath + 'calendar_view_month.png' // , autoScroll: true })); acc2.add(new Ext.ux.InfoPanel('panel2-2', { icon: iconPath + 'database_table.png' })); acc2.add(new Ext.ux.InfoPanel('panel2-3', { icon: iconPath + 'cart.png' })); acc2.add(new Ext.ux.InfoPanel('panel2-4', { icon: iconPath + 'email.png' })); acc2.add(new Ext.ux.InfoPanel('panel2-5', { icon: iconPath + 'feed.png' })); }); function callAjax(){ Ext.get("AccordionContainer").load({ url: "./AjaxAccordion.htm", scripts:true, text: "Loading..." }); } </script> </head> <body> <div> <button id="load" onclick="callAjax()">Show Me</button> </div> <div id="AccordionContainer"> <DIV id=acc2-ct> <DIV id=acc2-wrap> <DIV id=acc2-body> <div id=panel2-1> <div>panel 2-1</div> <div> <div class=text-content> morbi eros nunc, adipiscing vitae, adipiscing quis, feugiat ac, erat. pellentesque auctor, ligula quis commodo egestas, urna risus luctus ante, nec rutrum tortor ante eget erat. donec venenatis elit sed justo. </div> </div> </div> <div id=panel2-2> <div>panel 2-2</div> <div> <div class=text-content> lorem ipsum dolor sit amet, consectetuer adipiscing elit. fusce pellentesque. duis fermentum metus nec nisl. suspendisse potenti. vivamus id nibh ut neque sollicitudin ullamcorper. vivamus quis augue. </div> </div> </div> <div id=panel2-3> <div>panel 2-3</div> <div> <div class=text-content> lorem ipsum dolor sit amet, consectetuer adipiscing elit. fusce pellentesque. duis fermentum metus nec nisl. suspendisse potenti. vivamus id nibh ut neque sollicitudin ullamcorper. vivamus quis augue. </div> </div> </div> </div> <div id=panel2-4> <div>panel 2-4</div> <div> <div class=text-content> lorem ipsum dolor sit amet, consectetuer adipiscing elit. fusce pellentesque. duis fermentum metus nec nisl. suspendisse potenti. vivamus id nibh ut neque sollicitudin ullamcorper. vivamus quis augue. </div> </div> </div> </div> <div id=panel2-5> <div>panel 2-5</div> <div> <div class=text-content> lorem ipsum dolor sit amet, consectetuer adipiscing elit. fusce pellentesque. duis fermentum metus nec nisl. suspendisse potenti. vivamus id nibh ut neque sollicitudin ullamcorper. vivamus quis augue. </div> </div> </div> </div> </div> </div> </div> </div> </body> </html>

AjaxAccordion.htm

Code:

<script language="javascirpt"> Ext.onReady(function(){ Ext.BLANK_IMAGE_URL = './resources/images/default/s.gif'; var iconPath='icons/'; // create fitHeight accordion var acc2 = new Ext.ux.Accordion('acc2-ct', { body: 'acc2-body' , boxWrap: true , wrapEl: 'acc2-wrap' , fitContainer: true , fitToFrame: true , fitHeight: true , initialHeight: 240 // , animate: false }); // add panels to fitHeight accordion acc2.add(new Ext.ux.InfoPanel('panel2-1', { icon: iconPath + 'calendar_view_month.png' // , autoScroll: true })); acc2.add(new Ext.ux.InfoPanel('panel2-2', { icon: iconPath + 'database_table.png' })); acc2.add(new Ext.ux.InfoPanel('panel2-3', { icon: iconPath + 'cart.png' })); acc2.add(new Ext.ux.InfoPanel('panel2-4', { icon: iconPath + 'email.png' })); acc2.add(new Ext.ux.InfoPanel('panel2-5', { icon: iconPath + 'feed.png' })); }); </script> <DIV id=acc2-ct> <DIV id=acc2-wrap> <DIV id=acc2-body> <div id=panel2-1> <div>panel 2-1</div> <div> <div class=text-content> morbi eros nunc, adipiscing vitae, adipiscing quis, feugiat ac, erat. pellentesque auctor, ligula quis commodo egestas, urna risus luctus ante, nec rutrum tortor ante eget erat. donec venenatis elit sed justo. </div> </div> </div> <div id=panel2-2> <div>panel 2-2</div> <div> <div class=text-content> lorem ipsum dolor sit amet, consectetuer adipiscing elit. fusce pellentesque. duis fermentum metus nec nisl. suspendisse potenti. vivamus id nibh ut neque sollicitudin ullamcorper. vivamus quis augue. </div> </div> </div> <div id=panel2-3> <div>panel 2-3</div> <div> <div class=text-content> lorem ipsum dolor sit amet, consectetuer adipiscing elit. fusce pellentesque. duis fermentum metus nec nisl. suspendisse potenti. vivamus id nibh ut neque sollicitudin ullamcorper. vivamus quis augue. </div> </div> </div> </div> <div id=panel2-4> <div>panel 2-4</div> <div> <div class=text-content> lorem ipsum dolor sit amet, consectetuer adipiscing elit. fusce pellentesque. duis fermentum metus nec nisl. suspendisse potenti. vivamus id nibh ut neque sollicitudin ullamcorper. vivamus quis augue. </div> </div> </div> </div> <div id=panel2-5> <div>panel 2-5</div> <div> <div class=text-content> lorem ipsum dolor sit amet, consectetuer adipiscing elit. fusce pellentesque. duis fermentum metus nec nisl. suspendisse potenti. vivamus id nibh ut neque sollicitudin ullamcorper. vivamus quis augue. </div> </div> </div> </div> </div> </div> </div>

http://www.blog.sh/0/2007-7/281412794469.jpg
http://www.blog.sh/0/2007-7/281412629730.jpg

Read this: How to get reply to your question quickly? and then tell me what do you want me to do?

I refresh the content of the container and then create a new Accrodion on the same co

I refresh the content of the container and then create a new Accrodion on the same container.
May be I'll change my code , only refresh the content of container ,don't recreate
Accordion Object. I will try again. :)