473,574 Members | 2,249 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

New DOM elements invisible in IE, fine in FireFox

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()

Apr 1 '06 #1
3 2282
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/
Apr 1 '06 #2
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
Apr 2 '06 #3
Thank you both for your excellent replies, that's exactly what I needed.

Apr 4 '06 #4

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
4358
by: Anna | last post by:
Hi all. I have a javascript function that loops throught all text boxes inside a form: var elems = document.formName.elements; for(i = 0; i < elems.length; i++) { if(elems.type && elems.type.toLowerCase()=="text") do something }
8
4402
by: Jukka K. Korpela | last post by:
I just noticed that most browsers render <table border="1"><tr><td><p>foo</p></td></tr></table> the same way as <table border="1"><tr><td>foo</td></tr></table> That is, they ignore the p markup in the sense that they don't apply the normal default top and bottom margins. This is rather odd, especially
6
2578
by: glin | last post by:
Hi all, I have a javascript that create table and field elements dynamically in a hidden div, and when I trigger to display the div, the elements I created in div does not show in ie, but it works fine on firefox, why? Thanks.
11
9268
by: Christopher Benson-Manica | last post by:
Can I make a <textarea> and an <input type="checkbox"> invisible? -- Christopher Benson-Manica | I *should* know what I'm talking about - if I ataru(at)cyberspace.org | don't, I need to know. Flames welcome.
2
1478
by: Jason S | last post by:
Is there a list of which browsers allow DHTML to create new <img> elements? e.g. var img = document.createElement('img'); img.src = '...some image source path...'; I've been working on a webpage which uses Javascript to add images dynamically. Works fine on Firefox. I've been using a different browser (Mozilla 1.7.5) to test pages to make...
2
11008
by: Noah Sussman | last post by:
Hello, I am writing a function to reposition an element based on whether one of its edges is outside the visible area of the browser window (the code is below). My client has asked for code that runs in IE6 and Firefox. However, I am having a problem in Firefox. I've recently discovered that Firefox considers the clientWidth and...
11
2223
by: shankwheat | last post by:
I have a function which passes text from txtdebt to debtsbox which works fine. However, I want to add code which examines the value of debtsbox and if any of the values the user entered contain the string "d" then I want to emable rblDebts which is disabled when the page loads. This part is not working (no errors) and I'm not sure why....
7
2321
by: mavigozler | last post by:
IE7 does not appear to set an event on contained text inside SPAN elements whose 'onclick', 'onmouseover', and 'onmouseout' events, defying the HTML recommendation. Firefox appears to conform. Is that so?
0
7719
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language...
0
8044
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. ...
0
8229
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that...
1
7808
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For...
0
8096
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the...
0
3739
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in...
0
3749
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
2238
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
0
1055
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.