Menu
Hello guys. I have following problem: my dynamicaly generated document nodes don’t appear. Here are the parts of source code…
[b]index.html
[code=php]
<html>
<head>
<script src=”scripts/customGrid.js” type=”text/javascript” language=”javascript”></script>
</head>
<body>
<script language=”javascript” type=”text/javascript”>
<!–
// Grid data
var Data = new Array();
/* here goes aray elements definitions, no problems with them *
–>
</script>
<div id=”divGridContainer”></div>
<script language=”javascript” type=”text/javascript”>
<!–
var oGrid = new clsCustomGrid (“divGridContainer”);
// Configuring grid
oGrid.CellAlign = new Array (“center”, “center”, “left”);
oGrid.Columns = new Array(“id”, “username”, “role”);
oGrid.ColumnHeaders = new Array(“Selection”, “User Name”, “Role”);
oGrid.ColumnTypes = new Array (3, 1, 2);
oGrid.iCurrentPage = 1;
oGrid.iPageCount = 3;
oGrid.bDrawHeader = true;
oGrid.iTableBorder = 1;
// data setup
oGrid.Data = Data;
// Initializing
oGrid.Init();
// Drawing
oGrid.Draw();
–>
</script>
</body>
</html>
[b]customGrid.js
[code=php]
// JavaScript Document
function clsCustomGrid (container) {
this.sContainer = container;
this.sGridName = “DATA”;
/* other properties are defined here */
/* ….. */
}
clsCustomGrid.prototype.Draw = function () {
var i, j, k, l;
var iPage;
this.clean ();
// this.DrawFrame ();
var wContainer = document.getElementById (this.sContainer);
// creating top table
var tblTopTable = document.createElement(‘table’);
tblTopTable.style.backgroundColor = “#f0f0f0”;
tblTopTable.setAttribute(‘id’, this.sGridName+’_TopTable’);
tblTopTable.setAttribute(‘border’, this.iTableBorder);
var trHeadTable = document.createElement(‘tr’);
var tdHeadTable = document.createElement(‘td’);
trHeadTable.appendChild (tdHeadTable);
tblTopTable.appendChild (trHeadTable);
// creating form
var frmForm = document.createElement(‘form’);
frmForm.setAttribute(‘action’, ‘index.cfm’);
frmForm.setAttribute(‘method’, ‘POST’);
frmForm.setAttribute(‘target’, ‘_self’);
frmForm.setAttribute(‘id’, this.sFormID);
// creating grid table
var tblGridTable = document.createElement(‘table’);
tblGridTable.setAttribute(‘id’, this.sGridTableID);
tblGridTable.setAttribute(‘border’, this.iTableBorder);
// drawing header
if (this.bDrawHeader) {
var rwGridHeader = document.createElement(‘tr’);
var textNode;
var th;
for (k=0;k<this.ColumnCount;k++) {
if (this.ColumnTypes[k] != 4) {
textNode = document.createTextNode(this.ColumnHeaders[k]);
th = document.createElement (‘th’);
th.appendChild (textNode);
rwGridHeader.appendChild (th);
}
}
tblGridTable.appendChild (rwGridHeader);
}
frmForm.appendChild (tblGridTable);
tdHeadTable.appendChild (frmForm);
wContainer.appendChild(tblTopTable);
}
If I’m getting [i]innerHTML
[code=php]
<TABLE id=DATA_TopTable border=1>
<TR>
<TD>
<FORM id=frmDATA_Grid action=index.cfm method=post target=_self>
<TABLE id=DATA_GridTable border=1>
<TR>
<TH>Selection</TH>
<TH>User Name</TH>
<TH>Role</TH></TR>
</TABLE>
</FORM>
</TD></TR>
</TABLE>
… which means that everything is correct but… IE doesn’t draw it!!!
It works fine under O7, NS6 and those browsers draw table well, except of IE.
What am I doing wrong???
Does IE have any specific things?