URLs No Longer Working After Sort... BUT In IE Only - Other Browsers Not Affected

Joyrex

Not quite sure why this is happening, but in a DataTable that is created from static content, URLs that are in a sortable column become "unclickable" after an initial sort or filter. I'm aware about live() events, but why would it work fine in Firefox and not in IE?

Has anyone else experienced this? I even tried v1.8.0 to see if perhaps it was our 1.7.6 version that was causing it, and it exhibits the same behavior. Any help/advice is appreciated.

allan

This FAQ might help: http://datatables.net/faqs#events . Check out Visual Event as well ( http://www.sprymedia.co.uk/article/Visual+Event ) as this will let you see what elements have events attached to them.

Allan

Joyrex

Thanks for the quick response - I had read both of those (and I am using the Visual Event bookmarklet as well), so I will try it out and see if it can tell me what's going on.

It's just really odd that plain hyperlinks are not working after sort or filtering, and only in IE - Firefox seems to behave as expected.

Joyrex

The other issue is Visual Event won't work in IE, where the problem exists!

Oh well, hopefully the Developers Tools in IE will yield some information...

allan

Odd indeed! Can you just move your code over you using live events?

Allan

Joyrex

I'm not sure what you mean - I'm not using live events at all - that's what's strange (or perhaps, that's what's wrong ;) ) - they are just normal hrefs not created dynamically or 'on the fly', but when the table is sorted or filtered, the hyperlinks cease to work (the mouseover behaviour is weird too, since the hover state doesn't clear properly like it's delayed, making me think it might be a memory leak of some sort). What's really weird is it's only IE - Firefox and other clients handle the links and the sorting just fine.

allan

Hmm - it get's odder and odder! Can you post a link? If they are just hyperlinks which aren't working, then that suggests either an event handler is blocking them, or there is an element above them which is capturing the click.

Allan

Joyrex

I finally figured out what it was (and this is really weird; no idea why):

We originally were using the datatable with the fixed header and scrolling enabled, and some of our users complained (the header columns wouldn't align perfectly with the data columns), so we commented out the values for sScrollY and bScrollCollapse, but we were also using the fnAdjustColumnSizing() to adjust the columns - by removing the call to that function, it caused the issue to go away (again, only in IE - works fine in Firefox). Here's the script code we were using:

$(document).ready( function() {
var oTable = $('#IPTable3').dataTable( {
//"sScrollY": "600px",
//"bScrollCollapse": true,
"sPaginationType": "full_numbers",
"aaSorting": [[1,'asc']],
"bStateSave": true
} );

$(window).bind('resize', function () {
oTable.fnAdjustColumnSizing();
} );
} );

Once commented out/removed, the issue goes away:

$(document).ready( function() {
$('#IPTable3').dataTable( {
//"sScrollY": "600px",
//"bScrollCollapse": true,
"sPaginationType": "full_numbers",
"aaSorting": [[1,'asc']],
"bStateSave": true
} );

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

Might be good to know for future reference (I really am shocked no-one ever came upon this issue until now...

By the way, this was with JQuery 1.4.2 and DataTables 1.7.6.

Thanks again for the help and the troubleshooting ideas!

allan

No scrolling means that the columns can't possibly be misaligned since it is all one table. With scrolling enabled it is possible, but DataTables should throw a warning when it happens (it depends on the data in the table). There is a lot of code in DataTables to try and stop that from happening, but the only 100% certain way of stopping it is to use divs with set widths.

Allan

Joyrex

Allan,

Right - we disabled scrolling since the header columns did not sometimes align with the table body columns (since the fixed header effect is done by cloning the thead into a div and fixing it place I would guess), we disabled the scrolling so the header and body were as one. We were using this as a fluid-width table, so hence why we were using the function if someone resized the window.