New DOM elements invisible in IE, fine in FireFox

Discussion in 'Javascript' started by robert.oschler@gmail.com, Apr 1, 2006.

  1. Guest

    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()
    , Apr 1, 2006
    #1
    1. Advertising

  2. Randy Webb Guest

    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/
    Randy Webb, Apr 2, 2006
    #2
    1. Advertising

  3. RobG Guest

    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
    RobG, Apr 2, 2006
    #3
  4. Guest

    Thank you both for your excellent replies, that's exactly what I needed.
    , Apr 4, 2006
    #4
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Andy B
    Replies:
    5
    Views:
    574
    Andy B
    May 29, 2008
  2. Chris Seberino
    Replies:
    3
    Views:
    734
    Stefan Behnel
    Jun 12, 2009
  3. NoCopy  na
    Replies:
    6
    Views:
    235
    NoCopy na
    Jun 21, 2005
  4. Replies:
    3
    Views:
    150
    Thomas 'PointedEars' Lahn
    Nov 12, 2005
  5. ApOG
    Replies:
    6
    Views:
    176
Loading...

Share This Page