stationer / SortTable

A pure JavaScript (no dependencies) solution to make HTML Tables sortable
MIT License
37 stars 12 forks source link

Internet Explorer 11 - Object doesn't support property or method 'forEach' #2

Closed fullermetric closed 5 years ago

fullermetric commented 5 years ago

Tested on chrome version 77 and it this works fine, but unfortunately our company run Terminal Server 2008 and defaults the company browser to IE 11. version is 11.0.9600.19463

Error occurs ~ line 73.

I tried adding this meta tag, but did not resolve the problem. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

fullermetric commented 5 years ago

Two things I did to resolve this issue:

1) Added near bottom of SortTable.js this shim

(function () {
    if ( typeof NodeList.prototype.forEach === "function" ) return false;
    NodeList.prototype.forEach = Array.prototype.forEach;
})();

Found this courtesy of: https://tips.tutorialhorizon.com/2017/01/06/object-doesnt-support-property-or-method-foreach/

2) Ran into another issue with the insertRule code ~ line 254 that generated this error: IndexSizeError looked into this and corrected by modifying the code as follows:

    // Add default styles as the first style in head so they can be easily overwritten by user styles
    var element = document.createElement('style');
    document.head.insertBefore(element, document.head.childNodes[0]);
    var sheet = element.sheet;
    sheet.insertRule('table.js-sort-asc thead tr > .js-sort-active:after{content:"\\25b2";font-size:0.7em;padding-left:3px;line-height:0.7em;}', sheet.length ? sheet.length : 0);
    sheet.insertRule('table.js-sort-desc thead tr > .js-sort-active:after{content:"\\25bc";font-size:0.7em;padding-left:3px;line-height:0.7em;}', sheet.length ? sheet.length : 0);
tyleruebele commented 5 years ago
  1. I like the fix for this -- very clean.
  2. I am a bit surprised by this, that parameter being optional. Was that error also limited to IE? I see now IE is known to require that parameter: https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/insertRule#Browser_compatibility Being that we are adding these rules to a new <style> we can safely pass 0 there in both cases for a slightly cleaner edit.

Thank you for these improvements. I'll put them in a branch for testing.

tyleruebele commented 5 years ago

The commit above contains slightly revised versions of your fixes based on my comment above; untested, yet, as I don't have IE11 handy. If you should happen to confirm them, I'll merge this in. Else, I'll have to wait until I can get to IE11.

fullermetric commented 5 years ago

Thanks for the response, but letting you know I didn’t do a lot of testing I just got this fixed Based on scrounging for information about the errors I was seeing.

Now, that I look at fix for issue 2, I might try something a little different as ‘sheet’ is type object And when I tested sheet.length I was getting undefined. Please make improvements as you see fit.

Issues were limited to IE.

tyleruebele commented 5 years ago

No sweat, I'll get it tested.

tyleruebele commented 5 years ago

Passed Testing. Thanks again!