IE8 only - Losing some clicks inside datatable rows added dynamically

dmcclean

I have been using datatables on a project with a Ruby on Rails backend.
For IE8 only, some clicks are totally lost when clicking on a row which
has been added by ajax.

Background: The program has three datatables on a form.
The user can search for items, which are populated into the first table. The user
can click on a row in the first table, which will then update child tables with details using ajax.
Each table row has a checkbox in the first column. There is also a header row in each table which has
a 'toggle-all' checkbox which will toggle all row checkboxes in that table. The header
row was generated statically.

The program has worked fine on IE7, Firefox and Chrome. Recently our company has
upgraded to IE8. On IE8 only, the program will lose some clicks in the dynamically added
rows. Clicking the checkbox works about 1/5 times, totally randomly. The same happens
if I click a row to select it, usually does not work, but sometimes does.

Clicking on a header row checkbox works fine, it will toggle all the other checkboxes
in the table.

Attempting to debug by setting a breakpoint on jquery event handler, it looks like the click is
not even causing an event to be generated. However clicks on the header row, which was generated
statically, works fine.

I originally was using an older version of Datatables and jquery. I was using the 'live' function
in jquery to attach event listeners. After the problem appeared, I upgraded to the latest
version of Datatable and jquery, and changed from using jquery 'live' to jquery 'on'.
None of these changes made a difference.

For now, I have worked around the problem by putting a meta tag in the HTML which forces
IE into IE7 compatability mode. I would like to solve this for IE8.

Has anyone seem a problem like this before?

Thanks in advance,
Don

allan

Hi Don,

> Clicking the checkbox works about 1/5 times, totally randomly

Are there event handlers on the checkboxes, or something else that could interfere with the default click handling of the browser (i.e. checking and unchecking the checkbox)? Or might there be a transparent element which is floating above the checkbox which is swallowing the clicks? That's the two that options I'd be looking at first.

For the first one, you might want to run Visual Event over the page to see all of the events which have been attached: http://sprymedia.co.uk/article/Visual+Event+2 and for the second just use Firebug / Inspector.

Are you able to give me a link so I can see the page in action?

Thanks,
Allan

dmcclean

Hi Alan,
Thanks for responding. I forgot to mention how valuable datatables has been
for me, I have used it for several projects, thanks for the excellent job!

It is an intranet project so I cannot provide a link. I used Visual Event on the page with
Firefox, there were no unexpected event handlers. Unfortuately, Visual Event
does not work with IE8, where the problem is.

I do not see any transparent elements when I inspect the DOM.

I did some debugging. It appears jquery adds a 'beforeactivate' event to the
checkboxes to help handle screwy IE event handling. This event initially is
triggered on a click, and somewhere in the jquery code the handling of this event
cancels the click event (I think). I got lost trying to follow the jquery logic, so I could not figure out
anything else. It may be a jquery-IE issue.

Thanks,
Don

allan

Hi Don,

Just to check - are you using the latest version of jQuery?

If you disable DataTables on the table (but leave your event handlers in place - unless they are integrated in to the DataTables initialisation?) does the problem remain?

Are you able to put up a small example on the live site ( http://live.datatables.net ) or JSFiddle which shows the problem in IE8?

> I forgot to mention how valuable datatables has been for me, I have used it for several projects, thanks for the excellent job!

Thank you :-)

Allan

dmcclean

HI Alan,
I am using the latest version of jQuery. I will try the other steps you suggested. It may
be a few days, since I have some other work to complete first.

Thanks,
Don

allan

No problem - let us know how you get on!

Regards,
Allan

dmcclean

Well I finally got back on this and figured out the problem, it was much faster to figure out
once I attacked it from a higher perspective.

As detailed by
http://www.datatables.net/forums/discussion/7048/ie8-scrollx-table-fnadjustcolumnsizing-fire-window-resize-event/p1

in IE8, attaching fnAdjustColumnSizing to a window resizing event causes an infinite loop.

My issue was that clicking on a data tables row caused an ajax call which refreshed a
'details' div below the datatable. But the details page div was part of the same parent div
that also contained the datatable. The parent div was resized slightly, forcing a resize of the table, starting an infinite loop.

The infinite loop caused most subsuquent clicks to be ignored.

I think I originally used the fnAdjustColumnSizing to resize the datatable because I have hidden
columns, and my column headers were not being resized properly unless I used
fnAdustColumnSIzing. This worked fine until evil IE8.

Is there another way to automatically resize the column headers of a datatable which contains
hidden columns?

Thanks in advance.
Don

allan

Hi Don,

> Is there another way to automatically resize the column headers of a datatable which contains
hidden columns?

You could try calling fnDraw on its own, which will cause DataTables to realign the header and body tables (I assume you are using scrolling?). However, while that will align the columns, it won't cause DataTables to recalculate the column sizes. That might, or might not, be good enough for you?

Another option might be to have the details information have a bit of padding on it, to try and stop IE resizing the whole lot. Perhaps an inner DIV which is width:90%; margin: 0 auto;?

Regards,
Allan

dmcclean

Allan,
Thanks, I will try both options and see if what works best for me.

Don