DIV content not display when created with Javascript

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • gyip
    New Member
    • Mar 2008
    • 4
    #1

    DIV content not display when created with Javascript

    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
    Tags: None
    • gyip
      New Member
      • Mar 2008
      • 4
      #2
      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.dt d">
      <html xmlns="http://www.w3.org/1999/xhtml">

        Comment

        • gyip
          New Member
          • Mar 2008
          • 4
          #3
          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.

            Comment

            • hsriat
              Recognized Expert Top Contributor
              • Jan 2008
              • 1653
              #4
              Thanks for that information.

              Was it working on FireFox (without tbody)?


              Regards,
              Harpreet

                Comment

                • gyip
                  New Member
                  • Mar 2008
                  • 4
                  #5
                  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.insertCel l() to create the TR/TD tags instead of document.create Element() but that is just a shortcut for:

                  var tr = document.create Element('tr');
                  table.appendChi ld(tr);

                    Comment

                    • acoder
                      Recognized Expert MVP
                      • Nov 2006
                      • 16032
                      #6
                      Originally posted by gyip
                      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.

                        Comment

                        Previous template Next
                        Working...