Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > New DOM elements invisible in IE, fine in FireFox

Reply
Thread Tools

New DOM elements invisible in IE, fine in FireFox

 
 
robert.oschler@gmail.com
Guest
Posts: n/a
 
      04-01-2006
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 getShowLinkMiniTable(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 getShowLinkMiniTable()
function appendShowLink(linkNum, linkHtml, userName, notes)
{
var tblShowLinks = document.getElementById("tblShowLinks");

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

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

// New cell - link num.
var pLinkNum = document.createElement("P");
pLinkNum.innerHTML = "" + linkNum;

var tdLinkNum = document.createElement("TD");
tdLinkNum.setAttribute("WIDTH", "10%");
tdLinkNum.setAttribute("VALIGN", "TOP");
// tdLinkNum.setAttribute("innerHTML", "" . linkNum);
tdLinkNum.appendChild(pLinkNum);

// New cell - link html.
var pLinkHtml = document.createElement("P");
pLinkHtml.innerHTML = linkHtml;

var tdLinkHtml = document.createElement("TD");
tdLinkHtml.setAttribute("WIDTH", "20%");
// tdLinkHtml.setAttribute("innerHTML", linkHtml);
tdLinkHtml.appendChild(pLinkHtml);

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

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

// Add the cells to the row.
trNew.appendChild(tdLinkNum);
trNew.appendChild(tdUserMiniTable);
trNew.appendChild(tdLinkHtml);

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

 
Reply With Quote
 
 
 
 
Randy Webb
Guest
Posts: n/a
 
      04-01-2006
http://www.velocityreviews.com/forums/(E-Mail Removed) 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.setAttribute("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.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
 
Reply With Quote
 
 
 
 
RobG
Guest
Posts: n/a
 
      04-02-2006
(E-Mail Removed) 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 getShowLinkMiniTable(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 getShowLinkMiniTable()
> function appendShowLink(linkNum, linkHtml, userName, notes)
> {
> var tblShowLinks = document.getElementById("tblShowLinks");


Guessing that tblShowLinks is now a reference to the table...


> if (!tblShowLinks)
> {
> alert("(appendShowLink) Unable to find the show links table.");
> return;
> }
>
> // New row.
> var trNew = document.createElement("TR");


Change this line to:

var trNew = tblShowLinks.insertRow(-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.createElement("P");
> pLinkNum.innerHTML = "" + linkNum;
>
> var tdLinkNum = document.createElement("TD");
> tdLinkNum.setAttribute("WIDTH", "10%");
> tdLinkNum.setAttribute("VALIGN", "TOP");
> // tdLinkNum.setAttribute("innerHTML", "" . linkNum);
> tdLinkNum.appendChild(pLinkNum);


You can shorten your code using insertCell:

var tdLinkNum = trNew.insertCell(-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 HTMLTableElement and related interfaces:

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

summarised and collated here:

<URL:http://developer.mozilla.org/en/docs/DOM:table#HTML_Form_Element_Interface>


They were introduced with DOM 1 and are very widely supported.


> // New cell - link html.
> var pLinkHtml = document.createElement("P");
> pLinkHtml.innerHTML = linkHtml;
>
> var tdLinkHtml = document.createElement("TD");
> tdLinkHtml.setAttribute("WIDTH", "20%");
> // tdLinkHtml.setAttribute("innerHTML", linkHtml);
> tdLinkHtml.appendChild(pLinkHtml);
>
> var tdUserMiniTable = document.createElement("TD");
> tdUserMiniTable.setAttribute("WIDTH", "70%");
> tdUserMiniTable.setAttribute("VALIGN", "TOP");
>
> tdUserMiniTable.innerHTML = getShowLinkMiniTable(userName, notes);
> // tdUserMiniTable.innerHTML = "<p>hello</p>";
>
> // Add the cells to the row.
> trNew.appendChild(tdLinkNum);
> trNew.appendChild(tdUserMiniTable);
> trNew.appendChild(tdLinkHtml);
>
> // Add the new table data element to the table.
> tblShowLinks.appendChild(trNew);


Alternatively, get the tbody here (not needed if insertRow has been used,
the appendChild line can be deleted):

var tbody = tblShowLinks.getElementsByTagName('tbody')[0];
tbody.appendChild(trNew);



> } // function setShowLinks()
>



--
Rob
 
Reply With Quote
 
robert.oschler@gmail.com
Guest
Posts: n/a
 
      04-04-2006
Thank you both for your excellent replies, that's exactly what I needed.

 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
How *build* new elements and *replace* elements with xml.dom.minidom? Chris Seberino Python 3 06-12-2009 05:08 AM
Making 1 control invisible while showing another in the exact location of the invisible one Andy B ASP .Net 5 05-29-2008 03:08 AM
Invisible - Succinic acid : (AMBER ACID) Invisible krithika.143@gmail.com C++ 0 04-14-2008 06:59 PM
DOM javascript working fine with IE but nothing happens with Firefox ApOG Javascript 6 05-17-2007 03:02 PM
IE6 not aplying style to DOM created buttons...??? (FireFox working fine) neousr@googlemail.com Javascript 3 11-12-2005 02:06 PM



Advertisments