Works in Chrome, Not in MS Explorer11

Homewatts commented 6 years ago

Works great in Google Chrome, but no worky in MS Exploder11.

tripu commented 6 years ago

@Homewatts, can you provide more information?

Is there an error message on the JS console? What is it?
Are you sure that is the line that is failing?

Can you split up that line to isolate the error? eg,

if (Tablesort) {
  if (document.getElementById) {
      var table = document.getElementById("myTable");
      if (table) {
          new Tablesort(table);
      }
  }
}

Homewatts commented 6 years ago

Hi tripu, I'm not getting an error message. It just does nothing in IE11. Here is all of the pertinent code.

<head>
    <title>{$doctitle}</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link type="text/css" rel="StyleSheet" href="../css/tablesort.css" />
    <script type="text/javascript" src='../js/jquery-3.3.1.min.js'></script>
    <script type="text/javascript" src='../js/jquery.tablesorter.js'></script>
</head>
<body>
<table id="myTable" class="tablesorter">
    <thead>
    <tr>
        <th>Serial</th>
        <th>Start Wt</th>
        <th>Max Wt</th>
        <th>Min Wt</th>
        <th>Max Delta</th>
        <th>Capacity</th>
    </tr>
    </thead>
    <tbody >
        {foreach $results as $r}
        <tr>
        <td class="label"><a href="../php/cellinfo.php?idtest_cell={$r['idtest_cell']}">{$r['serial']}</a></td>
        <td >{$r['startwt']}</td>
        <td>{$r['maxwt']}</td>
        <td>{$r['minwt']}</td>
        <td>{$r['maxdelta']}</td>
        <td>{$r['capacity']}</td>
</tr>
        {/foreach}
</tbody>
</table>

<script>
    //new Tablesort(document.getElementById("myTable"));
    if (Tablesort)
    {
        if (document.getElementById) 
        {
            var table = document.getElementById("myTable");
            if (table) 
            {
                new Tablesort(table);
            }
        }
    }
}</script>

<script>
    $(function()
    {
      $("#myTable").tablesorter();
    });
</script>

tripu commented 6 years ago

(I edited your last comment just to fix Markdown formatting, @Homewatts.)

There are lots of things that could be going wrong; it's difficult to tell just by looking at this code.

Some ideas:

Are the JS files being loaded OK?
What is that .tablesorter() function?
Please debug the script I gave you using devtools, line by line, to see what conditions are met, thus what statements are executed or are not executed.
This seems to be a dynamic table, generated via JS. Try with a simpler table first (one with static data), and see if that works.

sheats commented 6 years ago

Hi there, just ran into this problem myself. Can't be sure it's the same as OP but here's what I'm seeing.

dashboard_and_slack_-_activated_insights

That specific code looks like this (line 44 is the init() with character 11 being the space right after init):

    (a.prototype = {
      init(a, b) {
        let c,
          d,
          e,
          f,
          g = this;
        if (
          ((g.table = a),
          (g.thead = !1),
          (g.options = b),
          a.rows && a.rows.length > 0)
        )
          if (a.tHead && a.tHead.rows.length > 0) {
            for (e = 0; e < a.tHead.rows.length; e++)
              if (
                a.tHead.rows[e].getAttribute('data-sort-method') === 'thead'
              ) {
                c = a.tHead.rows[e];
                break;
              }
            c || (c = a.tHead.rows[a.tHead.rows.length - 1]), (g.thead = !0);
          } else c = a.rows[0];
        if (c) {
          const h = function() {
            g.current &&
              g.current !== this &&
              g.current.removeAttribute('aria-sort'),
              (g.current = this),
              g.sortTable(this);
          };
          for (e = 0; e < c.cells.length; e++)
            (f = c.cells[e]),
              f.setAttribute('role', 'columnheader'),
              f.getAttribute('data-sort-method') !== 'none' &&
                ((f.tabindex = 0),
                f.addEventListener('click', h, !1),
                f.getAttribute('data-sort-default') !== null && (d = f));
          d && ((g.current = d), g.sortTable(d));
        }
      },
      sortTable(a, g) {

So my guess is that it's thinking that's supposed to be a dictionary: init: function() or something...?

Version: tablesort v5.0.2 (2017-11-12)

sheats commented 6 years ago

@tripu I reverted back to version 5.0.0 and the problem went away.

tripu commented 6 years ago

@Homewatts, @sheats: I can't reproduce your errors.

These two Codepens are identical, except that the first one loads https://cdnjs.cloudflare.com/ajax/libs/tablesort/5.0.2/tablesort.min.js (Tablesort 5.0.2), and the second one loads https://cdnjs.cloudflare.com/ajax/libs/tablesort/5.0.0/tablesort.min.js (Tablesort 5.0.0):

Both work fine on MS Explorer 11.371.

More so: examining differences in src/tablesort.js between v5.0.0 and v5.0.2 (or even between v5.0.0 and current gh-pages), I see changes in 6 lines only, and those changes don't look to me like the kind that would cause errors in old browsers (eg, making use of newest JS features, etc)… (BTW, @Homewatts, line no. 44 does not seem to be the one you mention, but one containing: var stabilize = function(sort, antiStabilize) {.)

@Homewatts, @sheats: can you test the two Codepens above, and help me find the bug?

@Homewatts, have you tried my suggestions yet?

sheats commented 6 years ago

@tripu both those codepens worked for me in IE11 so I'm guessing it was something with my setup. I was using PUG and hosting on Firebase Functions so I'm wondering if perhaps the file passed through my babel or something as part of my build process. When I'm back in that area of the code I'll try to upgrade again and let you know if I see a problem.

tristen / tablesort

Works in Chrome, Not in MS Explorer11 #156