469,636 Members | 1,815 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,636 developers. It's quick & easy.

DIV content not display when created with Javascript

4
My environment:

IE7 browser hitting an ASP.NET webpage that uses Javascript to render the contents. This is not an ASP.NET problem but a Javascript problem that I am encountering.

Problem:

I am basically generating a menu which is essentially a TABLE within a DIV tag using Javascript. For some reason the table is not displaying. The DIV tag essentially has the dimensions of 0.

What I have done:

The first thing you're probably asking is, "your script is probably not working." I have verified that the code is indeed correct. In my IE7 environment, I have installed the developer toolbar and verified that the HTML is being created by the script and it looks correct.

The next thing you're probably asking is, "you have some funky style settings which is why it's not display." I have verified that the elements created are correct by copying the EXACT html code that is created (using the developer toolbar) and pasting it inside the same page and loading it. Viola, it displays just as expected and rendered perfectly.

I have also tried to resize the DIV tag (when generated with javascript) in the developer toolbar and no contents are displayed inside of it. It's just one blank div even though when you look at the DOM, the elements are there.

The HTML elements being generated is similar to the following:

<div>
<table>
<tr><td>Item 1</td></tr>
<tr><td>Item 2</td></tr>
<tr><td>Item 3</td></tr>
<tr><td>Item 4</td></tr>
</table>
</div>

Thanks
Mar 27 '08 #1
5 1347
gyip
4
One thing that might be important is that the DOCTYPE is the following:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
Mar 27 '08 #2
gyip
4
After bashing my head for 3 days and searching hundreds of pages across the internet which lead me to my original post, I finally figured it out.

I found a great article published on MSDN titled "How to Build Tables Dynamically": http://msdn2.microsoft.com/en-us/lib...98(VS.85).aspx

It states the following:

Note Internet Explorer requires that you create a tBody element and insert it into the table when using the DOM. Since you are manipulating the document tree directly, Internet Explorer does not create the tBody, which is automatically implied when using HTML.

I hope this helps other people.
Mar 27 '08 #3
hsriat
1,654 Expert 1GB
Thanks for that information.

Was it working on FireFox (without tbody)?


Regards,
Harpreet
Mar 27 '08 #4
gyip
4
The weird thing is that Firefox was inconsistant. Because I actually have a table within a table within a div. And the first table rendered in Firefox but not the second which also confused me. Versus IE, which didn't render anything at all. This also explains why cut and pasting of the html into the page works.

I also found several other posts elsewhere where people had the same problem but I never found a post with the conclusion that I mentioned above. You will see some random people saying to use table.insertRow() or table.insertCell() to create the TR/TD tags instead of document.createElement() but that is just a shortcut for:

var tr = document.createElement('tr');
table.appendChild(tr);
Mar 27 '08 #5
acoder
16,027 Expert Mod 8TB
The weird thing is that Firefox was inconsistant. Because I actually have a table within a table within a div. And the first table rendered in Firefox but not the second which also confused me. Versus IE, which didn't render anything at all. This also explains why cut and pasting of the html into the page works.
You must have made a mistake somewhere.

The article that you posted has a very bad coding style. Non-standard and buggy probably only tested in IE.
Apr 1 '08 #6

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

2 posts views Thread by Brian Vallelunga | last post: by
reply views Thread by Jimmy Cerra | last post: by
1 post views Thread by Izzet Pembeci | last post: by
10 posts views Thread by clintonG | last post: by
2 posts views Thread by Ruskin Hardie | last post: by
9 posts views Thread by pbd22 | last post: by
reply views Thread by gheharukoh7 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.