I found yet another interesting bug in IE7, related to using Prototype‘s Insertion.After command to insert additional table rows into an existing table. Apparently, IE7 will reverse the order of the table rows being inserted. As a proof of concept, I’ve set up an ie7 table insert bug test page to prove my point.
Here’s how to duplicate this bug.
- Create a new web page (we’ll call it test.htm).
- Create a
<table>and add a few rows. - Give one row a specific id (such as
id="insertAfterThis"). - Create a separate web page (call it testdata.htm) with more table rows — just the
<tr>...</tr>, nothing else. - Add the following JavaScript to run after the window loads:
new Ajax.Request('testdata.htm', { method:'get', onSuccess:function(transport) { new Insertion.After('insertAfterThis', transport.responseText); } }); - Load the test.htm page in Firefox, and see how the rows are inserted in the order they exist in the testdata.htm file.
- Load the test.htm page in IE, and see how the order of the rows is reversed.
It’s quite a frustrating bug, because there’s apparently only two ways to work around it:
- Figure out a way to add markup that forces IE to add the rows correctly.
OR - Have IE receive the table rows from your Ajax call in reverse order (so it’ll reverse it again into the correct order).
Considering we’re not even sure if #1 is possible, it’s a very frustrating bug. Some may say it’s a bug with the Prototype library, but I doubt it, since Prototype is simply inserting text — it has no idea there’s a table involved. IE7 reveals yet another illogical bug.