PDA

View Full Version : insertAdjacentHTML is null or not an object in IE



nicholasnet
14 Oct 2010, 6:44 AM
I have this weird problem going on just in IE. It throws error for the first time. However if I refresh the page then it works flawlessly it is just the first time it chokes. Did anybody faced the same problem here are my codes.


<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>IFrame Test</title>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(function()
{
var iframe = document.getElementById('ifr');
iframe.contentWindow.document.open();
iframe.contentWindow.document.write
(
'<link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-3.2.1/resources/css/ext-all-notheme.css" />'+
'<link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-3.2.1/examples/button/buttons.css" />'+
'<link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-3.2.1/resources/css/xtheme-gray.css" />'+
'<sc'+'ript type="text/javascript" src="http://extjs.cachefly.net/ext-3.2.1/adapter/ext/ext-base.js"></sc'+'ript>'+
'<sc'+'ript type="text/javascript" src="http://extjs.cachefly.net/ext-3.2.1/ext-all.js"></sc'+'ript>'+
'<sc'+'ript type="text/javascript" src="http://extjs.cachefly.net/ext-3.2.1/examples/ux/RowExpander.js"></sc'+'ript>'+
'<sc'+'ript type="text/javascript" src="mock.js"></sc'+'ript>'
);
iframe.contentWindow.document.close();
});
</script>
</head>
<body>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id elit ipsum, et mattis massa. Morbi mi lacus, congue id commodo in, semper eget ipsum. Integer ut tortor eu lorem pellentesque egestas. Vivamus suscipit sodales dolor sed fermentum. Pellentesque quis consectetur sapien. Phasellus suscipit scelerisque metus ac accumsan. Fusce tempor, nisi non vestibulum euismod, nibh velit fermentum tortor, eget vulputate odio ante ultrices lorem. Integer consectetur rhoncus aliquet. Donec luctus lectus sapien, mollis scelerisque libero. Donec dictum dictum commodo. Praesent rutrum auctor lacus a dictum.
<iframe id="ifr" width="100%" height="600px" style="margin: 0px; padding: 0px; border: 0px solid #000;"></iframe>
</body>
</html>
Here is my mock.js

var myData =
[
[
'Dry Hair',
'How not to have dry hair',
'What is hair? Why dry hair?',
'Hair, Dry, Something, Secret',
200,
'Yes',
'Product Review',
'Jhonny',
'2009-04-10',
12.72,
'Complete'
],
[
'Oily Hair',
'How not to have oily hair',
'What is hair? Why oily hair?',
'Hair, Oily, Something, Secret',
300,
'Yes',
'Product Review',
'John Doe',
'2007-01-10',
5.72,
'In progress'
]
];


// create the data store
var store = new Ext.data.ArrayStore
({
fields:
[
{name: 'title'},
{name: 'h1'},
{name: 'h2'},
{name: 'keyword'},
{name: 'wordlimit'},
{name: 'onnav'},
{name: 'type'},
{name: 'assigned_to'},
{name: 'deadline', type: 'date', dateFormat: 'Y-m-d'},
{name: 'cost', type: 'float'},
{name: 'status'}
]
});
// manually load local data
store.loadData(myData);
var expander = new Ext.ux.grid.RowExpander
({
tpl : new Ext.Template
(
'<div class="x-tpl-detail-view"><p><b>Title:</b> {title}</p>',
'<p><b>H1:</b> {h1}</p>',
'<p><b>H2:</b> {h1}</p>',
'<p><b>Keywords:</b> {keyword}</p>',
'<p><b>Word Limit:</b> {wordlimit}</p>',
'<p><b>Is this menu item:</b> {onnav}</p>',
'<p><b>Article Type:</b> {type}</p></div>'
)
});

Ext.onReady(function()
{
Ext.QuickTips.init();

var viewport = new Ext.Viewport
({
layout: 'border',
items:
[{
region: 'center',
xtype: 'grid',
columnLines: true,
id: 'grid',
store: store,
columns:
[
expander,
{id:'title', header: 'Article', width: 160, sortable: true, dataIndex: 'title'},
{header: 'Assigned to', width: 85, sortable: true, dataIndex: 'assigned_to'},
{header: 'Deadline', width: 160, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'deadline'},
{header: 'Cost', width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'cost'},
{header: 'Status', width: 160, sortable: true, dataIndex: 'status'}

],
sm: new Ext.grid.RowSelectionModel
({
singleSelect: true
}),
stripeRows: true,
plugins: expander,
autoExpandColumn: 'title',
height: 350,
width: 600
}]
});
});