IE8 - Not able to click rows
IE8 - Not able to click rows
ashipma
Posts: 14Questions: 0Answers: 0
I have a data grid that is populated via AJAX. The DataTable uses client-side processing. The number of rows in the table will be fairly small, so I wanted to disable paging, but when I do, row clicking no longer works in IE8. Everything still works fine in Google Chrome. I am using Internet Explorer 8.0.6001.18702CO and Google Chrome 32.0.1700.76 m.
I have tried to create a test case on the live.datatables.net site, but I am still unable to either log in or register on that site. When I try to log in, it just says "Checking..." at the top. I am unable to log in or register on that site. Do you know if there is a problem with my account?
But here is the code that shows the behavior when viewed in IE8. If paging is set to false, then the rows in the table are not clickable in IE8. If paging is set to true, then the clicking works. Again, in Chrome this works fine regardless of whether paging is enabled or not. This issue is only happening in IE8.
Please let me know if I am doing anything incorrect below. Is row clicking being applied in the preferred manner or is there a better way to enable row clicking?
Also, I am not sure if this is the right way to include code or not. I am not able to post a test case on the live.datatables.net site because I am unable to log in. I cannot post this to jsbin.com because it uses AJAX and access a file on the datatables.net site. So is there any good way to include this code to where it is readable or to post a test case?
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>DataTables - JS Bin</title>
<link href="//cdn.datatables.net/1.10.0/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
color: #333;
background-color: #fff;
}
</style>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//cdn.datatables.net/1.10.0/js/jquery.dataTables.js"></script>
<script type="text/javascript">
$(document).ready( function () {
$("#field-table").DataTable({
scrollCollapse: true,
ordering: false,
searching: false,
info: false,
ajax: "datatables.net/examples/ajax/data/arrays.txt",
processing: true,
paging: false,
scrollY: "9em",
columns: [
{ visible: false },
{ visible: false },
{ visible: false },
{ visible: false },
{ visible: true },
{ visible: true }
]
});
$('#field-table tbody').on('click', 'tr', function () {
$(this).toggleClass("selected");
});
});
</script>
</head>
<body>
<table id="field-table" class="display" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
</table>
</body>
</html>
Thanks
Replies
I am just following up on the previous question. I think it might be a bug in the table, but I am just wanting to verify that is the case and that it is not instead my own mistake. When using AJAX and disabling paging, the row clicking does not work in IE8. I am unable to make a test case because I am not able to log into the live.datatables.net site and also JSBin does not run in IE8, so it wouldn't do any good anyway. But I did put code in the previous post. You can just copy and paste it and run it in IE8 and try clicking on the rows in the table.
I am also running into other issues, these are more intermittent, with row clickability in IE8. Also, the paging buttons do not always work in IE8. Again, for all these cases I am using the client side processing using AJAX as the data source.
Thank you so much for your help,
Alex
I think the problem is in your selector:
However, there isn't a
tbodyelement in the table when you run your code, so that won't work. Different browsers handle a missing tbody different, which is why you are seeing different results.Try:
Allan
I just tried that and it still did not work. Actually, for some reason, adding the "tbody tr" to the "on" function caused clicking to not work at all in IE8. I am not sure if it is a compatibility issue with jQuery and IE8 or not.
Here is the JavaScript with the tbody in the first selector. This will work if paging is enabled. However, if paging is disabled, clicking will not work anymore.
Here is the code with the "tbody tr" selector in the "on" function. Here it does not matter what paging is set to, clicking will not work in IE8.
Please let me know if I am doing anything wrong in either of these scenarios. I am using IE 8.0.6001.18702CO and jquery-1.11.0. If I use Google Chrome, both of these versions of the script work as expected.
And again, I am only experiencing the clicking issue in IE8 on the first version of the script when paging is set to false and when retrieving data from AJAX. If paging is set to true or if data does not come from AJAX, clicking works fine. The second version of the script never works in IE8 at least with AJAX. That might be a compatibility issue with the version of jQuery that I am using and IE8 possibly, though I thought anything in the 1.x family of jQuery was supposed to be compatible with IE.
Thank you for your help,
Alex
I'd need a link to a test case I think please.
Allan
I am not sure how to create a test case since it is using AJAX and since I am not able to log in on or register for the live.datatables.net site. And for the JSBin site, I am unable to create a test case on that site because the file that I am using for the AJAX data source comes from http://datatables.net/examples/ajax/data/arrays.txt, which is not on the same domain as JSBin.
Please let me know if you know of a way to create a test case. But even if I were able to do that, this issue only occurs in IE8, but the JSBin site will not even run in IE8.
The only way that I know of to show this issue to you is to have you copy the code provided in my first post and run it. The way I have it set up on my computer is that I have that code in a file called "test.html" and then I downloaded the arrays.txt file from the http://datatables.net/examples/ajax/data/arrays.txt location and saved it in the same directory as "test.html". I then opened the html file in IE8 and tried clicking on the rows. If paging is set to true, clicking works. If paging is set to false, clicking does not work.
But as mentioned previously, please let me know if there is a way that you know that will allow me to be able to create this as a test case.
Thank you again,
Alex
try this
$($field-table.table().body()).on('click', 'tr', function(event)
{
});
So I have the same issue, but only when I use Responsive and IE8.
First, Responsive, causes a JS error because it's trying to use indexOf on an array. That prototype doesn't exist in IE8.
col.includeIn.indexOf( breakpoint ) !== -1;
I hacked it back in, and the table starts to work again, but I lose any ability to select a row.
If I disable Responsive, clicking a row works fine.
$("#links-table tbody").on("click", "tr", function() {
alert("CLICKED");
});
Thanks,
-- Jason
Just a quick update, I was finally able to get rows clickable again by changing the selector to the document. (Luckily I only have one table.)
$(document).on("click", "tr", function() { alert("CLICKED"); });
I'm guessing Responsive must be doing something to the DOM which is confusing IE8.
Thanks for letting me know about this. IE8 wasn't a target browser, but it should be relatively simple to add support for it properly in future. I've created a github issue for it.
Allan