document.write is deferred inside a table - HTML Forums

jasongr · 09-15-2005, 07:03 AM

Hello,

My application uses Web pages whose grid is defined by several tables. I noticed a funny behavior on IE and Firefox which is giving me pains.

Apparently, when the browser renders a <table> tag and before it reaches the </table> end tag, any document.write actions in Javascript get deferred execution till closure of table instead of occuring at runtime as they are parsed.

The following snippet demonstrates the problem:

Code:

<html> <body>
<script language="javascript">
document.write("before table");
alert("before table");
</script>

<table>

<script language="javascript">
document.write("in table PROBLEM");
alert("in table");
</script>

</table>

<script language="javascript">
document.write("after table");
alert("after table");
</script>

</body> </html>

When this snippet is run, the problematic document.write of "in table" gets deferred till after the table gets closed.
We use alert() calls here to stop rendering and clarify what happens when. You can see that the other document.write calls that are not in mid-table, are displayed properly.

In our real-world app this gives us a problem wherein we use document.write to render code that displays a Flash navigation menu component, but this Flash menu appears after the table tag is closed which is after rendering of entire page, so the Flash shows up to users very late after most of the page has loaded instead of showing up early as we require it.

Since we have to use the table as part of the layout grid of the site, please advise how to work around this issue.
Note that we render the Flash using document.write because we have a Javascript check if Flash exists or not, and if not, we render an alternative non-Flash menu.

Thanks!

RysChwith · 09-15-2005, 08:37 AM

The problem isn't in the JavaScript, but the HTML. If you walk through, you'll see that it's producing the equivalent of this:

Code:

<table>
in table PROBLEM
</table>

The text is in neither a <td> nor a <tr> tag, both of which are required in the table. Anything inside table tags, but outside the td and tr tags, will render after the table. So you'll need to modify the document.write to include those.

Rys

jasongr · 09-15-2005, 09:02 AM

Hi RysChwith

I wanted to tell you that the scenario you described is not wrong
you can render elements that are not <tr> <td> right after the <table> tag and the browser will render them
Also, moving the document.write to after the <tr><td> has no effect and the problem still persists

Can you send me another answer that works?

RysChwith · 09-15-2005, 01:24 PM

Adding in the <tr> and <td> tags makes it work for me:

Code:

<html> <body>
<script language="javascript">
document.write("before table");
alert("before table");
</script>

<table border = "1"><tr><td>

<script language="javascript">
document.write("in table PROBLEM");
alert("in table");
</td></tr></script>

</table>

<script language="javascript">
document.write("after table");
alert("after table");
</script>

</body> </html>

Is the code you posted the actual code you're using? I'm assuming not. Post the actual code, and we can see what else is causing the problem.

Rys