Rails spinoffs - Jan 2008 - dynamic table/adding rows in IE using 'new Element("tr")'

I''m trying to create a few menus using prototype.js "insert"
function.
I create a table using ''new Element("table")'',
insert it in DIV and
then add links - one row per link (or the other way round - create a
full table, then insert it).

I initially wrote a code that worked fine in Firefox, but did not in
IE (currently testing with 6.0):
function addLinkToTable(table, link){
		var r = new Element("tr");
		var c = new Element("td");
		table.insert(r.insert(c.insert(link)));
}

The table gets built but is not visible in IE. Then the alternative
function below do not use "new Element()", but instead uses the
standard DOM method to add rows. And it works also in IE:
function addLinkToTable(table, link){
		var r = table.insertRow(table.rows.length);
		var c = r.insertCell(0);
		$(c).insert(link);
}
in fact it''s just adding of the row that seems to fail when using
"row
= new Element("tr"); table.insert(row)".

I wonder is this something that is "not supposed" to work with
prototype? BTW, if I check the table content created by the first
approach (innerHTML of my DIV), the table looks reasonably good, only
is not visible. In fact if I write:

mydiv.insert (table.outerHTML);

instead of

mydiv.insert (table);

it becomes visible, but of course outerHTML is not not a portable code
and in this way I loose the event handlers for my links, etc. Bad IE
again, or I''m overlooking something?
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

2008/1/22, normunds
<nkalnberzins-/E1597aS9LQAvxtiuMwx3w@public.gmane.org>:
>
>
> I''m trying to create a few menus using prototype.js
"insert" function.
> I create a table using ''new Element("table")'',
insert it in DIV and
> then add links - one row per link (or the other way round - create a
> full table, then insert it).
>
> I initially wrote a code that worked fine in Firefox, but did not in
> IE (currently testing with 6.0):
> function addLinkToTable(table, link){
>                 var r = new Element("tr");
>                 var c = new Element("td");
>                 table.insert(r.insert(c.insert(link)));
> }
>
> The table gets built but is not visible in IE. Then the alternative
> function below do not use "new Element()", but instead uses the
> standard DOM method to add rows. And it works also in IE:
> function addLinkToTable(table, link){
>                 var r = table.insertRow(table.rows.length);
>                 var c = r.insertCell(0);
>                 $(c).insert(link);
> }
> in fact it''s just adding of the row that seems to fail when using
"row
> = new Element("tr"); table.insert(row)".
>
> I wonder is this something that is "not supposed" to work with
> prototype? BTW, if I check the table content created by the first
> approach (innerHTML of my DIV), the table looks reasonably good, only
> is not visible. In fact if I write:
>
> mydiv.insert (table.outerHTML);
>
> instead of
>
> mydiv.insert (table);
>
> it becomes visible, but of course outerHTML is not not a portable code
> and in this way I loose the event handlers for my links, etc. Bad IE
> again, or I''m overlooking something?
>
>
>
You need to create an additional html element for the table, i.e.
"tbody" as
first child to the table element.
Here is the rewritten method:
function addLinkToTable(table, link){
                var tb = new Element("tbody");
                var r = new Element("tr");
                var c = new Element("td");
                table.insert(tb.insert(r.insert(c.insert(link))));
}


-- 
Niko

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Thanks Niko; I agree, to certain point - I also suspected that
addition of "tbody" could be a possible
workaround/"improvement".
Though it does not seem to be mandatory anywhere except in the DOM
interpretation of IE, right? IE and anybody else happily uses HTML
string of format
"<table><tr><td></td></tr></table>"
without any hint
of "tbody".

I wonder if there are any other cases where "insert" of HTML string
works, but insert of the equivalent object fails? I do not recall any.

Normunds
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

On Jan 23, 1:57 am, normunds
<nkalnberz...-/E1597aS9LQAvxtiuMwx3w@public.gmane.org>
wrote:
> Thanks Niko; I agree, to certain point - I also suspected that
> addition of "tbody" could be a possible
workaround/"improvement".
A tbody element is only required in IE if you use the DOM Core
createElement method, e.g.

Method 1:

  var table = document.createElement(''table'');
  var tbody = document.createElement(''tbody'');
  var row = document.createElement(''row'');
  table.appendChild(tbody);
  tbody.appendChild(row);

However, if you use the insertRow convenience method, you don''t need
to explicitly add the tbody or append the row.  The following is
equivalent to the above.

Method 2:

  var table = document.createElement(''table'');
  var row = table.insertRow(-1);

Note: do not omit the mandatory row index.  IE will allow it,
defaulting to -1, but others will not (see link below).

> Though it does not seem to be mandatory anywhere except in the DOM
> interpretation of IE, right? IE and anybody else happily uses HTML
> string of format
"<table><tr><td></td></tr></table>"
without any hint
> of "tbody".
The DOM is built from HTML, they are two separate animals.  A tbody
*element*  is mandatory in an HTML table element, however the *tags*
are optional in the HTML markup.

When using method 1 above, most browsers allow you to omit the
explicit tbody creation, but not IE.  Using method 2, IE creates the
implied tbody element as specified in the W3C DOM 2 HTML
specification:

<URL: http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-39872903 >


--
Rob
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---