rowReordering plugin fail in IE8

Ironwil616

In both Chrome and IE9 the reordering of rows works as expected, but in IE8 I'm experiencing a total fail, and have yet to find the cause. I can run the online example in IE8 and that works, so it seems to be something specific to my application that's causing the failure. However, I've added a "fnAlert" call in the rowReordering init code, and also dropped in a console.log in both the success and error event handlers in the ajax call within the plugin. In IE8 I've opened the dev tools and console so the console.log should actually work, but I'm getting no messages at all. I do get success messages in IE9 and Chrome.

Now, my first question when I was made aware that IE8 was giving us some problems was "why are we using IE8 for an internal application?", but that's not my call to make. I just need to get a general idea of how to track down the problem, because I'm getting no errors whatsoever, and the debugging tools haven't been enlightening, either. Unfortunately I can't just provide a link to the app, because it's on our Intranet. The behavior I see when I try to move the row is that it starts to show some kind of difference, but then it appears that the mouse just drops the row in its original position. I'm developing in ASP.NET MVC with the Razor view engine, and had a random idea on a possible answer (yet to test it). Repeated rows can be generated in a loop within the Razor view, and though the call to set up the plugin occurs after the DOM is supposedly set up, I once noticed that a row added after the loop actually appears before the loop when rendered. So I'm wondering if a race condition is possibly occurring, where in IE8 the generation of the rows that the rowReordering plugin is supposed to handle is too late in the game. Just a wild guess - at this point I'm grasping at straws.

Are there any possible compatibility issues with IE8? I'm going to test my hypothesis this weekend when I have time, but hopefully someone will have kicked this problem to the curb already, and will share their wisdom with me.

Ironwil616

I finally found the 'cause' of the problem, if IE8 can't just be blamed entirely. It was really odd, but while trying to determine the cause of the rowReordering failure, I typed in a JavaScript syntax error, which promptly caused the reordering to work again. I messed around some more, and found that this line caused the failure in IE8:

[code]
$(window).bind('resize', function () { oTable.fnAdjustColumnSizing(); });
[/code]

I had placed this line of code after initializing datatables, because one of my requirements was that each row in a table take up only 1 line. This actually took some doing, because the table widths are percentages. Why did this matter? Well, the following CSS took care of the single-line requirement:

[code]
td { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
[/code]

But that CSS doesn't work unless the table it's used on either has a table-layout of 'fixed', or has a pixel-based width. Since mine were percentage-based, I had to go with a fixed table-layout rule. This in turn caused a problem when the browser was resized, as the columns would then extend out of the tables. The 'fnAdjustColumnSizing' function fixed that last problem. So I had a fix for a fix for a fix. Bummer. Still, everything was hunky-dunky until I was informed we'd have to support IE8, and IE8 wasn't handling the rowReordering. The weirdest thing was that the 'fnAdjustColumnSizing' function fired off when I clicked a checkbox in one of the tables, and then threw a null error for the oSettings object when this line ran:

[code]
if ( oSettings.oFeatures.bAutoWidth === false )
[/code]

I'm assuming that, like datatables itself, the event handlers are wired up at init time, and aren't updated without a tear-down and rebuild. So, since the oTable object was tied to the resize function of the browser, it only makes sense that it was null when responding to a checkbox being clicked. No idea why IE8 was firing it off at that time. Here's an example of my init code, maybe I did something strange:

[code]
$(function () {
var someTableID_oTable = $("#SomeTableID").dataTable({
"aoColumnDefs": [
{ "sWidth": "50px", "aTargets": [2] }
],
"fnInfoCallback": function (oSettings, iStart, iEnd, iMax, iTotal, sPre) {
if (iEnd == 0) return "0 records";
return iStart + " to " + iEnd + " of " + iTotal;
},
"sDom": 'rtlip',
"bAutoWidth": false,
"iDisplayLength": 10,
"aLengthMenu": [[5, 10, 20, -1], [5, 10, 20, "All"]]
}).columnFilter({
aoColumns: [ { type: "text" }, { type: "select", values: [ "blah", "blah", "blah" ] }, null ]
});

$(window).bind('resize', function () { someTableID_oTable .fnAdjustColumnSizing(); });
});
[/code]

I just removed the resize handler and it worked. Any ideas why this is?