New DOM elements invisible in IE, fine in FireFox

[robert.oschler]

I have an AJAX driven page where I dynamically add rows to a known
table on the page, based on the return document from the AJAX call,
using DOM node methods (except for a small snippet of code, see below)
.. The code I use to do that is shown below.

The code runs fine in FireFox. I can see the newly created table rows
and everything looks fine on the page. In Internet Explorer, I don't
see any changes to the page after the new nodes are added.

I traced into the code using Microsoft's debugger. If I walk the child
nodes of the target table using the Immediate window (same as Mozilla
debugger's interactive window), I do see the newly created elements.
If I inspect the innerHTML of the new nodes I do see the HTML code in
proper format. But the page does not show the new elements at all.

Is this an Internet Explorer oddity and if so, what can I do to get
things working?

Thanks.

--------------------------

// Append the contents of TABLE in the "show links" DIV to the new
link.
// Helper function to build the mini table for the submitting user
name and notes.
function getShowLinkMini Table(userName, notes)
{
var tblHtml =
"<TABLE ALIGN=LEFT VALIGN=TOP>\n" +
" <TR>\n" +
" <TD WIDTH=\"30%\">\ n" +
" <P><b>Submitter :</b> " + userName + "</P>\n" +
" </TD>\n" +
" </TR>\n" +
" <TR>\n" +
" <TD WIDTH=\"70%\">\ n" +
" <P><b>Notes:</b> " + notes + "</P>\n" +
" </TD>\n" +
" </TR>\n" +
"</TABLE>\n";

return tblHtml;
} // function getShowLinkMini Table()
function appendShowLink( linkNum, linkHtml, userName, notes)
{
var tblShowLinks = document.getEle mentById("tblSh owLinks");

if (!tblShowLinks)
{
alert("(appendS howLink) Unable to find the show links table.");
return;
}

// New row.
var trNew = document.create Element("TR");

// New cell - link num.
var pLinkNum = document.create Element("P");
pLinkNum.innerH TML = "" + linkNum;

var tdLinkNum = document.create Element("TD");
tdLinkNum.setAt tribute("WIDTH" , "10%");
tdLinkNum.setAt tribute("VALIGN ", "TOP");
// tdLinkNum.setAt tribute("innerH TML", "" . linkNum);
tdLinkNum.appen dChild(pLinkNum );

// New cell - link html.
var pLinkHtml = document.create Element("P");
pLinkHtml.inner HTML = linkHtml;

var tdLinkHtml = document.create Element("TD");
tdLinkHtml.setA ttribute("WIDTH ", "20%");
// tdLinkHtml.setA ttribute("inner HTML", linkHtml);
tdLinkHtml.appe ndChild(pLinkHt ml);

var tdUserMiniTable = document.create Element("TD");
tdUserMiniTable .setAttribute(" WIDTH", "70%");
tdUserMiniTable .setAttribute(" VALIGN", "TOP");

tdUserMiniTable .innerHTML = getShowLinkMini Table(userName, notes);
// tdUserMiniTable .innerHTML = "<p>hello</p>";

// Add the cells to the row.
trNew.appendChi ld(tdLinkNum);
trNew.appendChi ld(tdUserMiniTa ble);
trNew.appendChi ld(tdLinkHtml);

// Add the new table data element to the table.
tblShowLinks.ap pendChild(trNew );
} // function setShowLinks()

[Randy Webb]

ro************@ gmail.com said the following on 4/1/2006 3:37 PM:

I have an AJAX driven page where I dynamically add rows to a known
table on the page, based on the return document from the AJAX call,
using DOM node methods (except for a small snippet of code, see below)
.. The code I use to do that is shown below.

The code runs fine in FireFox. I can see the newly created table rows
and everything looks fine on the page. In Internet Explorer, I don't
see any changes to the page after the new nodes are added.

I traced into the code using Microsoft's debugger. If I walk the child
nodes of the target table using the Immediate window (same as Mozilla
debugger's interactive window), I do see the newly created elements.
If I inspect the innerHTML of the new nodes I do see the HTML code in
proper format. But the page does not show the new elements at all.

Is this an Internet Explorer oddity and if so, what can I do to get
things working?

Don't use setAttribute with IE, set the property directly:

tdLinkNum.width ="10%"; instead of:
tdLinkNum.setAt tribute("WIDTH" , "10%");

Also, IE requires you to have a TBODY in your code, so you have to
create one (or hard code it).

--
Randy
comp.lang.javas cript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/

[RobG]

ro************@ gmail.com wrote:

I have an AJAX driven page where I dynamically add rows to a known
table on the page, based on the return document from the AJAX call,
using DOM node methods (except for a small snippet of code, see below)
. The code I use to do that is shown below.

The code runs fine in FireFox. I can see the newly created table rows
and everything looks fine on the page. In Internet Explorer, I don't
see any changes to the page after the new nodes are added.
Don't use innerHTML to modify a table. According to Microsoft's
documentation, you shouldn't use innerHTML on any table element other than
a TD.

<URL:http://msdn.microsoft. com/workshop/author/dhtml/reference/properties/innerhtml.asp>
Secondly, IE requires that TR elements added to a table are added to a
tbody. There are two fixes for that: use insertRow, which adds rows
directly to the table, or find the TBODY element and add your rows to that.

You don't need to explicitly create a tbody. It is a mandatory element in
a table, but the tags are optional. When you create your table below, a
tbody is created automatically.

I traced into the code using Microsoft's debugger. If I walk the child
nodes of the target table using the Immediate window (same as Mozilla
debugger's interactive window), I do see the newly created elements.
If I inspect the innerHTML of the new nodes I do see the HTML code in
proper format. But the page does not show the new elements at all.

Is this an Internet Explorer oddity and if so, what can I do to get
things working?

Thanks.

--------------------------

// Append the contents of TABLE in the "show links" DIV to the new
link.
// Helper function to build the mini table for the submitting user
name and notes.
function getShowLinkMini Table(userName, notes)
{
var tblHtml =
"<TABLE ALIGN=LEFT VALIGN=TOP>\n" +
" <TR>\n" +
" <TD WIDTH=\"30%\">\ n" +
" <P><b>Submitter :</b> " + userName + "</P>\n" +
" </TD>\n" +
" </TR>\n" +
" <TR>\n" +
" <TD WIDTH=\"70%\">\ n" +
" <P><b>Notes:</b> " + notes + "</P>\n" +
" </TD>\n" +
" </TR>\n" +
"</TABLE>\n";

return tblHtml;
} // function getShowLinkMini Table()
function appendShowLink( linkNum, linkHtml, userName, notes)
{
var tblShowLinks = document.getEle mentById("tblSh owLinks");
Guessing that tblShowLinks is now a reference to the table...

if (!tblShowLinks)
{
alert("(appendS howLink) Unable to find the show links table.");
return;
}

// New row.
var trNew = document.create Element("TR");
Change this line to:

var trNew = tblShowLinks.in sertRow(-1);

trNew is now a reference to a new row in your table. The row will be
inserted at the index provided, -1 inserts it as the last row.

// New cell - link num.
var pLinkNum = document.create Element("P");
pLinkNum.innerH TML = "" + linkNum;

var tdLinkNum = document.create Element("TD");
tdLinkNum.setAt tribute("WIDTH" , "10%");
tdLinkNum.setAt tribute("VALIGN ", "TOP");
// tdLinkNum.setAt tribute("innerH TML", "" . linkNum);
tdLinkNum.appen dChild(pLinkNum );
You can shorten your code using insertCell:

var tdLinkNum = trNew.insertCel l(-1);
tdLinkNum.style .width = "10%";
tdLinkNum.style .verticalAlign = "top";

Cell is already appended to the tr by insertCell, so no need for
appendChild. Check out the DOM HTMLTableElemen t and related interfaces:

<URL:http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-64060425>

summarised and collated here:

<URL:http://developer.mozil la.org/en/docs/DOM:table#HTML_ Form_Element_In terface>
They were introduced with DOM 1 and are very widely supported.

// New cell - link html.
var pLinkHtml = document.create Element("P");
pLinkHtml.inner HTML = linkHtml;

var tdLinkHtml = document.create Element("TD");
tdLinkHtml.setA ttribute("WIDTH ", "20%");
// tdLinkHtml.setA ttribute("inner HTML", linkHtml);
tdLinkHtml.appe ndChild(pLinkHt ml);

var tdUserMiniTable = document.create Element("TD");
tdUserMiniTable .setAttribute(" WIDTH", "70%");
tdUserMiniTable .setAttribute(" VALIGN", "TOP");

tdUserMiniTable .innerHTML = getShowLinkMini Table(userName, notes);
// tdUserMiniTable .innerHTML = "<p>hello</p>";

// Add the cells to the row.
trNew.appendChi ld(tdLinkNum);
trNew.appendChi ld(tdUserMiniTa ble);
trNew.appendChi ld(tdLinkHtml);

// Add the new table data element to the table.
tblShowLinks.ap pendChild(trNew );
Alternatively, get the tbody here (not needed if insertRow has been used,
the appendChild line can be deleted):

var tbody = tblShowLinks.ge tElementsByTagN ame('tbody')[0];
tbody.appendChi ld(trNew);
} // function setShowLinks()

--
Rob

[robert.oschler]

Thank you both for your excellent replies, that's exactly what I needed.