PDA

View Full Version : Error loading layout in Firefox



chrislhardin
5 May 2009, 6:30 AM
Error: [Exception... "Node cannot be inserted at the specified point in the hierarchy" code: "3" nsresult: "0x80530003 (NS_ERROR_DOM_HIERARCHY_REQUEST_ERR)" location: "http://rma.bls.com/RMAWeb/web/js/ext-2.2/ext-all-debug.js Line: 16212"]
Source File: http://rma.bls.com/RMAWeb/web/js/ext-2.2/ext-all-debug.js
Line: 16212

I get this error in Firefox. This applications was developer for Internet Explorer 7 solely and it is a large application with many, many lines of custom javascript code. I have been tasked with seeing what it would take to make it work in Firefox. I suspect that it will be an extremely arduous task. Currently, the only error I get is the one above and nothing ever loads.


Here is an excerpt from the layout code. Mind that this is just a small fraction of the code for this site.

//Main function to intialize everything we want
Ext.onReady(function(){

Ext.ux.menu.RangeMenu.prototype.icons = {
gt: 'web/js/greater_then.png',
lt: 'web/js/less_then.png',
eq: 'web/js/equals.png'
};

Ext.ux.grid.filter.StringFilter.prototype.icon = 'web/js/img/find.png';

Ext.QuickTips.init();
//Ext.form.Field.prototype.msgTarget = 'side';

// Ext.state.Manager.setProvider(new Ext.state.CookieProvider());


var viewport = new Ext.Viewport({
layout:'border',
items:[
RMA.layout.headerPanel = new Ext.Panel({ // raw
region:'north',
id: 'header',
el: 'header',
height:100,
fitToFrame:true,
bodyStyle:'background-color: transparent'
}),
RMA.layout.footerPanel = new Ext.Panel({
region:'south',
contentEl: 'footer',
id: 'footer',
bodyStyle:'background-color: transparent',
border:false,
split:false,
height: 25,
//minSize: 100,
//maxSize: 200,
//collapsible: true,
//title:'South',
margins:'0 0 0 0'
}),
RMA.layout.rightNavPanel = new Ext.Panel({
region:'east',

contentEl: 'right-col',
id: 'right-col',

border:false,
split:false,
layout:'accordion',
//height: 25
//minSize: 0,
//maxSize: 0,
//collapsible: true,
// closable:true,
layoutConfig:{
animate:true
},
//collapsed:true,
//closed: true,
hidden: true,
margins:'0 0 0 0'

//title:'South',
//margins:'0 0 0 0'
}),
RMA.layout.leftNavPanel = new Ext.Panel({
region:'west',
title: 'Navigation',
contentEl: 'left-col',
id: 'left-col',
bodyStyle:'background-color: transparent',
border:false,
split:false,
layout:'accordion',
autoScroll:true,
//collapsible: true,
//height: 25
//minSize: 100,
//maxSize: 200,
//collapsible: true,
closable:true,
layoutConfig:{
animate:true
},
margins:'0 0 0 0'

//title:'South',
//margins:'0 0 0 0'
}),
RMA.layout.centerPanel = new Ext.Panel({
id: 'center',
region:'center',
contentEl: 'center1',
layout:'fit',
border:true,
layoutConfig:{
animate:true
},
margins:'0 0 0 0'
})
]
});

Ext.get("hideit").on('click', function() {
var w = Ext.getCmp('left-col');
w.collapsed ? w.expand() : w.collapse();
});

//headerPanel.load("web/layout/header.html");
RMA.layout.headerPanel.load({url: 'layout/header.jspx', scripts: true, text: "Loading..."});
RMA.layout.footerPanel.load({url: 'layout/footer.jspx', scripts: true, text: "Loading..."});
RMA.layout.leftNavPanel.load({url: 'layout/leftNav.jspx', scripts: true, text: "Loading...", callback: function(){
RMA.menu.toggleAdminBlind();
RMA.menu.toggleRMABlind();
}});

Condor
5 May 2009, 6:39 AM
I assume that the el's and contentEl's you are referring to are also nested inside eachother?

chrislhardin
5 May 2009, 6:47 AM
<body>
<div id="page-wrapper">
<div id="header">


</div>
<div id="column-wrapper">
<!-- begin columns -->
<div id="left-col">

</div>

<div id="center2">
<a id="hideit" href="#"></a>
</div>
<div id="center1">


<div id="generic-details">

<div id="generic-tabs"></div>
</div>
<div id="generic-grid"></div>

</div>
<div id="props-panel" style="width:200px;height:200px;overflow:hidden;">
</div>
</div>
<div id="footer-wrapper">
<div id="footer">
</div>
</div>

</div>
</body>

Condor
5 May 2009, 7:19 AM
I don't see a right-col or a center div?

chrislhardin
5 May 2009, 7:25 AM
It's been a while but the center panel is center1 and I think right-col doesn't exist. This all works in Internet Explorer 7, but Internet Explorer is a bit forgiving. Should I try adding right-col ?

chrislhardin
5 May 2009, 7:33 AM
I modified it and added two divs, but the same error and the same result in Firefox.

<body>
<div id="page-wrapper">
<div id="header">


</div>
<div id="column-wrapper">
<!-- begin columns -->
<div id="left-col">

</div>

<div id="center"></div>

<div id="center2">
<a id="hideit" href="#"></a>
</div>
<div id="center1">


<div id="generic-details">

<div id="generic-tabs"></div>
</div>
<div id="generic-grid"></div>

</div>
<div id="right-col">

</div>
<div id="props-panel" style="width:200px;height:200px;overflow:hidden;">
</div>
</div>
<div id="footer-wrapper">
<div id="footer">
</div>
</div>

</div>
</body>