Accordion/InfoPanel error when loaded twice

**zaratine** · 23 Jul 2007, 11:03 AM

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.

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!

**jsakalos** · 23 Jul 2007, 2:19 PM

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.

**zaratine** · 24 Jul 2007, 3:10 AM

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!

**vflying** · 24 Jul 2007, 9:22 PM

[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.

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()
);

**jsakalos** · 25 Jul 2007, 12:55 AM

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

**vflying** · 26 Jul 2007, 6:29 AM

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>

**jsakalos** · 26 Jul 2007, 7:30 AM

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.

**vflying** · 27 Jul 2007, 7:04 PM

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>

**jsakalos** · 28 Jul 2007, 1:33 AM

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

**vflying** · 29 Jul 2007, 1:31 AM

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.

Thread: Accordion/InfoPanel error when loaded twice

Thread Tools

Search Thread

Display

Accordion/InfoPanel error when loaded twice

Example

I'm sorry for that code

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

Posting Permissions

Stay Connected

Stay Connected

Sign up for Sencha News