Prototype function not working in IE8

Question

I recently asked a question and received a valid working answer. However at the time, I was testing in Firefox and while all seemed good, the required browser IE8 didnt like this function.

I am trying to find an alternative to it.

Here is my Original question: jQuery Filter row by condition

And here is the working answer (not in IE8 though):

// collating the 'regions':
var regions = ['americas', 'emea', 'apac'],
// initialising an array to use, later:
    foundClasses = [];

// iterating over the 'tr' elements, filtering them:
$('tr').filter(function () {
    // using Array.prototype.forEach to filter the classList of the element:
    foundClasses = Array.prototype.filter.call(this.classList, function (c) {
        // 'c' is the current class in the classList we're iterating over,
        // if it's in the array we return that array to the 'foundClasses':
        if (regions.indexOf(c) > -1) {
            return c;
        }
    });
    // we keep the the element in the jQuery collection (of 'tr' elements),
    // if we do not have exactly 2 of the allowed classes...
    return foundClasses.length !== 2;
// removing those 'tr' elements:
}).remove();

I don't know much about prototype at all so I just went with it as it did what I needed but any other solutions are welcome.

Array.prototype. filter doesn't exist in ie8. Maybe you can use jQuery grep instead — HMR, Nov 20 '14 at 14:54
[According to this](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/filter), IE gained support for `Array.prototype.filter` in IE9... — James Thorpe, Nov 20 '14 at 14:55
@JamesThorpe - Thanks James, I did see that when doing some research but sadly for the next few months, we are still on IE8 which this product needs to support. I just didn't have a solution to the OP so trying to fix this one a little tough — SBB, Nov 20 '14 at 14:56
As @HMR suggests, there will be a jQuery alternative available, or there's a [polyfill available](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/filter#Polyfill) — James Thorpe, Nov 20 '14 at 14:58
@JamesThorpe - Thanks for the link, I added the code to my tool and although the error is gone complaining about prototype, the function doesn't.. function. I will try and find a jQuery alternative i suppose — SBB, Nov 20 '14 at 15:04

JLRishe · Accepted Answer · 2014-11-20T17:20:19.943

1

As stated in the comments. Array.prototype.filter doesn't exist in IE8. Instead, you can use jQuery's grep():

// collating the 'regions':
var regions = ['americas', 'emea', 'apac'];

// iterating over the 'tr' elements, filtering them:
$('tr').filter(function () {
    var foundClasses = $.grep(this.className.split(/\s+/), function (c) {
        return $.grep(regions, function(r) { return r === c; }).length > 0;
    });

    // we keep the the element in the jQuery collection (of 'tr' elements),
    // if we do not have exactly 2 of the allowed classes...
    return foundClasses.length !== 2;
}).remove();

Note that .classList is also not supported in IE until IE 10. Instead, you can use this.className.split(/\s+/), as above.

edited Nov 20 '14 at 17:20

answered Nov 20 '14 at 15:20

JLRishe

99,490
19
131
169

For some reason IE8 is saying that `length is null or not an object` ? – SBB Nov 20 '14 at 15:25
I don't see how any of the code there could cause that error, unless the error is happening internally to jQuery? Have you stepped through the code in the debugger? On which line is the error occurring? – JLRishe Nov 20 '14 at 15:39
Yeah I am stepping through it and its happening at the start of the tr line. It references the core jquery file in the error. This is happening on the GREP line. – SBB Nov 20 '14 at 15:41
Within the Filter function, I put as breakpoint and tested `this` and we are in fact within the row and the class is there. However, should this.classList be returning anything? I'm not sure if classList is part of `grep` but says undefined when I do it within the filter function. Seems like classList is not supported in IE: http://stackoverflow.com/questions/8098406/code-with-classlist-does-not-work-in-ie – SBB Nov 20 '14 at 15:53
@SBB Yes, `.classList` is the problem. Please see my updated answer. – JLRishe Nov 20 '14 at 16:10
I am now getting an error on `return regions.indexOf(c) > -1;` saying object doesnt support this property` – SBB Nov 20 '14 at 17:12
@SBB Yep, looks like `Array.prototype.indexOf()` isn't supported until IE 9. Please try my above edit. – JLRishe Nov 20 '14 at 17:20
Worked perfectly! Thanks so much for your support and continued efforts! – SBB Nov 20 '14 at 17:22

Prototype function not working in IE8

1 Answers1