Unable to use Element to add tables in IE 6
1 view
Skip to first unread message
scott212
Aug 13, 2008, 3:33:36 AM8/13/08
to Prototype & script.aculo.us
I am unable to add tables dynamically in IE 6, anyone know what's
wrong with this code? IE Developer Toolbar shows the content in the
html, but the page never seems to draw it... please help!
recreation of the problem:
<html >
<head>
<title>I Hate IE</title>
<script src="/js/prototype/prototype.js" type="text/javascript"></
script>
<script type="text/javascript">
function addTable()
{
alert('addTable has been called');
var tmp1 = new Element('table',{});
$('parent').insert(tmp1);
var tmp2 = new Element('tr',{});
tmp1.insert(tmp2);
var tmp3 = new Element('td',{}).update('foo');
tmp2.insert(tmp3);
}
document.observe("dom:loaded", function () {
addTable();
});
</script>
</head>
<body>
<table>
<tr>
<td id='parent'></td>
</tr>
</table>
</body>
</html>
wrong with this code? IE Developer Toolbar shows the content in the
html, but the page never seems to draw it... please help!
recreation of the problem:
<html >
<head>
<title>I Hate IE</title>
<script src="/js/prototype/prototype.js" type="text/javascript"></
script>
<script type="text/javascript">
function addTable()
{
alert('addTable has been called');
var tmp1 = new Element('table',{});
$('parent').insert(tmp1);
var tmp2 = new Element('tr',{});
tmp1.insert(tmp2);
var tmp3 = new Element('td',{}).update('foo');
tmp2.insert(tmp3);
}
document.observe("dom:loaded", function () {
addTable();
});
</script>
</head>
<body>
<table>
<tr>
<td id='parent'></td>
</tr>
</table>
</body>
</html>
T.J. Crowder
Aug 13, 2008, 3:59:04 AM8/13/08
to Prototype & script.aculo.us
Hi,
Have you read through and tried the things in the other recent IE/
tables thread?
http://groups.google.com/group/prototype-scriptaculous/browse_thread/thread/a99fdac0ae87bed3/98c6f03bb2d369cb
Specifically, you need a tbody.
Separately, a side note: Using innerHTML with a string will generally
be faster than adding things as you're doing in the example. The HTML
parsers in modern browsers are highly optimized and can work directly
with their own internals, whereas JavaScript code has to go through
both the JS interpreter (which isn't necessarily a problem) and also
the browser's DOM API. Parsing HTML is what browsers *do*,
fundamentally, and so except in situations (and yours may well be
one!) where you can't avoid it, inserting content using HTML strings
and innerHTML (or the update() method) is your best default choice.
Leverage the optimization they've done. E.g.:
$('parent').update('<table><tr><td>foo</td></tr></table>');
(Naturally there's an exception to this: I think when you're adding
form elements dynamically, you have to use DOM methods rather than
innerHTML for the elements to be recognized reliably on all browsers.)
HTH,
--
T.J. Crowder
tj / crowder software / com
Have you read through and tried the things in the other recent IE/
tables thread?
http://groups.google.com/group/prototype-scriptaculous/browse_thread/thread/a99fdac0ae87bed3/98c6f03bb2d369cb
Specifically, you need a tbody.
Separately, a side note: Using innerHTML with a string will generally
be faster than adding things as you're doing in the example. The HTML
parsers in modern browsers are highly optimized and can work directly
with their own internals, whereas JavaScript code has to go through
both the JS interpreter (which isn't necessarily a problem) and also
the browser's DOM API. Parsing HTML is what browsers *do*,
fundamentally, and so except in situations (and yours may well be
one!) where you can't avoid it, inserting content using HTML strings
and innerHTML (or the update() method) is your best default choice.
Leverage the optimization they've done. E.g.:
$('parent').update('<table><tr><td>foo</td></tr></table>');
(Naturally there's an exception to this: I think when you're adding
form elements dynamically, you have to use DOM methods rather than
innerHTML for the elements to be recognized reliably on all browsers.)
HTH,
--
T.J. Crowder
tj / crowder software / com
blatyo
Aug 14, 2008, 9:36:20 AM8/14/08
to Prototype & script.aculo.us
I can confirm the problem is not having a tbody. Also, whenever you
call Element constructor, you don't need to specify the hash if you
don't have any extra attributes to add at creation. So:
var tr = new Element('tr',{});
is equivalent to
var tr = new Element('tr');
Also, this portion does not need an anonymous function
document.observe("dom:loaded", function () {
addTable();
});
You can reduce the amount of method calls by doing the following
document.observe("dom:loaded", addTable);
On Aug 13, 3:59 am, "T.J. Crowder" <t...@crowdersoftware.com> wrote:
> Hi,
>
> Have you read through and tried the things in the other recent IE/
> tables thread?http://groups.google.com/group/prototype-scriptaculous/browse_thread/...
call Element constructor, you don't need to specify the hash if you
don't have any extra attributes to add at creation. So:
var tr = new Element('tr',{});
is equivalent to
var tr = new Element('tr');
Also, this portion does not need an anonymous function
document.observe("dom:loaded", function () {
addTable();
});
document.observe("dom:loaded", addTable);
On Aug 13, 3:59 am, "T.J. Crowder" <t...@crowdersoftware.com> wrote:
> Hi,
>
> Have you read through and tried the things in the other recent IE/
Reply all
Reply to author
Forward
0 new messages