I''m pretty sure I''ve come across a bug for CSS matching in
IE6. (I''m
kind of new at the collaborative thing, so I figured here would be a
safer place to write this, as opposed to
The relevant HTML is:
<script type="text/javascript">
function getLineItems() { return $$("#LineItems tbody tr"); }
function addLineItem(e) {
var template = $(''LineItemTemplate'');
new Insertion.Before( template, "<tr>" + template.innerHTML +
"</
tr>" );
Event.observe( template.previous().down("a.rowctl"),
"click",
removeLineItem );
var _rows = getLineItems();
if ( _rows.length == 4 ) {
_rows[0].down("img").src = "icon_delete.gif";
Event.observe( _rows[0].down("a.rowctl"), "click",
removeLineItem );
}
}
function removeLineItem(e) {
//alert( Event.element(e).tagName );
//alert( Event.element(e).up("tr").tagName );
var tr = Event.element(e).up("tr");
tr.parentNode.removeChild(tr);
var _rows = getLineItems();
if ( _rows.length == 3 ) {
_rows[0].down("img").src = "icon_delete_disabled.gif";
Event.stopObserving( _rows[0].down("a.rowctl"), "click",
removeLineItem );
}
}
Event.observe( window, "load", function() {
var _rows = getLineItems();
_rows.each( function(r,indx) {
if ( indx < _rows.length - 2 && _rows.length > 3 )
Event.observe( r.down("a.rowctl"), "click",
removeLineItem );
});
Event.observe( _rows.last().down("a.rowctl"), "click",
addLineItem );
});
</script>
<table id="LineItems" cellspacing="0">
<thead><tr><th> </th><th>Column</th></tr></thead>
<tbody>
<tr>
<td><a class="rowctl"><img
src="icon_delete_disabled.gif" /></a></td>
<td><input type="text" name="Field"
value="" /></td>
</tr>
<tr id="LineItemTemplate" style="display: none;">
<td><a class="rowctl"><img
src="icon_delete.gif" /></a></td>
<td><input type="text" name="Field"
value="" /></td>
</tr>
<tr>
<td colspan="2"><a class="rowctl"><img
src="icon_add.gif" /></a></td>
</tr>
</tbody>
</table>
--------------------------
Clicking the icon_add.gif image in the bottom row of the table fires
addLineItem(), which copies the contents of tr#LineItemTemplate to a
new table row, then inserts it into the table. An event listener is
attached to the delete image link so the user can remove the row.
removeLineItem() has the problem. In my tests, the event is triggered
in such a way that Event.element(e) is the IMG tag. But in IE6,
the .up("tr") call returns the immediate parent -- the A tag -- which
is incorrect. The script just removes the link (and image), instead of
the entire row.
It looks like IE6 (I haven''t tested IE7, but FF and Safari
don''t do
this) is messing up in the unmark() function on line 2295 (v.1.5.1.1)
by setting the _counted property on the IMG and A elements to the
string "undefined", as opposed to nothing. I assume that unmark() was
called by _rows[0].down() in the addLineItem() function.
So the line (#2595) in matchElements has "if (element._counted)",
which returns true when it shouldn''t.
Changing line 2595 to be explicitly: if (element._counted==true)
caused an error "addEventListener is null or not an object" in IE6. I
have no idea why. But changing line 2295 to: _counted = "", worked in
all the browsers I tested, even if it''s not the right way of doing
things.
--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---
