Replies

• ashipma Posts: 14Questions: 0Answers: 0

  May 2014

  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
• allan Posts: 63,691Questions: 1Answers: 10,500 Site admin

  May 2014

  I think the problem is in your selector:

  $('#field-table tbody')

  However, there isn't a tbody element 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:

  $('#field-table').on('click', 'tbody tr', function () {
  

  Allan
• ashipma Posts: 14Questions: 0Answers: 0

  May 2014 edited May 2014

  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.

  $(document).ready( function () {
      $("#field-table").DataTable({
  
          //This file comes from "http://datatables.net/examples/ajax/data/arrays.txt"
          ajax: "arrays.txt",
  
          //If paging is true, the clicking works fine in IE8.
          //However, if paging is false, clicking will not work in IE8
          //with an AJAX data source. Clicking works fine when it is
          //not using AJAX.
          //paging: false,
  
          scrollCollapse: true,
          ordering: false,
          searching: false,
          info: false,
          processing: true,
          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");
      });
  });
  

  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.

  $(document).ready( function () {
      $("#field-table").DataTable({
  
          //This file comes from "http://datatables.net/examples/ajax/data/arrays.txt"
          ajax: "arrays.txt",
  
          //If paging is true, the clicking works fine in IE8.
          //However, if paging is false, clicking will not work in IE8
          //with an AJAX data source. Clicking works fine when it is
          //not using AJAX.
          //paging: false,
  
          scrollCollapse: true,
          ordering: false,
          searching: false,
          info: false,
          processing: true,
          scrollY: "9em",
          columns: [
              { visible: false },
              { visible: false },
              { visible: false },
              { visible: false },
              { visible: true },
              { visible: true }
          ]
      });
  
      $('#field-table').on('click', 'tbody tr', function () {
          $(this).toggleClass("selected");
      });
  });
  

  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
• allan Posts: 63,691Questions: 1Answers: 10,500 Site admin

  May 2014

  I'd need a link to a test case I think please.

  Allan
• ashipma Posts: 14Questions: 0Answers: 0

  May 2014

  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
• andersonxf Posts: 2Questions: 0Answers: 0

  June 2014

  try this

  $($field-table.table().body()).on('click', 'tr', function(event)
  {

  });
• jsm174 Posts: 6Questions: 0Answers: 0

  August 2014

  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
• jsm174 Posts: 6Questions: 0Answers: 0

  August 2014

  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.
• allan Posts: 63,691Questions: 1Answers: 10,500 Site admin

  August 2014

  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