indexOf causing error in IE; working in other browsers

Question

EDIT: I'm super confused. I have a local copy of the webpage, in which I added the 'indexOf' function to the javascript file. This page is working. However, the page on the live site, which I have pushed my changes to, is still getting the indexOf error. Furthermore, another page on the site that uses the exact same script is not getting any errors. There shouldn't be a problem with giftFeatures[giftB], because according to the debugger it is an array.

This is a URL for the problem page

This is a page that uses the exact same script with no errors

What is the difference between those two pages, why does the second work but the first doesn't? This is driving me crazy.

I have a script attached to a page that is working in all browsers except IE (using IE11). Here's the method that's not working:

  buildComparisonData: function() {
  this.comparisonData = [];
  var giftA = this.selectedGifts[0];
  var giftB = this.selectedGifts[1];
  if(this.selectedGifts.length == 3)
   var giftC = this.selectedGifts[2];

  for(var i = 0; i < this.config.giftFeatureLabels.length; i++) {
    var label = this.config.giftFeatureLabels[i].feature;
    var checkimg = '<img src="https://www.giftcalcs.com/sites/all/modules/custom/pgc_giftcompare/check-mark.png">';
    var giftBChecked = this.config.giftFeatures[giftB].indexOf(i) < 0 ? '' : checkimg;
    var giftAChecked = this.config.giftFeatures[giftA].indexOf(i) < 0 ? '' : checkimg;
    if(this.selectedGifts.length == 3)
     var giftCChecked = this.config.giftFeatures[giftC].indexOf(i) < 0 ? '&nbsp;' : checkimg;

    var row = {
      label: label,
      giftA: giftAChecked,
      giftB: giftBChecked
    };
    if(this.selectedGifts.length == 3)
      row.giftC = giftCChecked;

    this.comparisonData.push(row);

    var comparisonLabels = {};
    comparisonLabels.giftA = this.getGiftLabel(this.selectedGifts[0]);
    comparisonLabels.giftB = this.getGiftLabel(this.selectedGifts[1]);
    if(this.selectedGifts.length == 3)
      comparisonLabels.giftC = this.getGiftLabel(this.selectedGifts[2]);

    this.comparisonLabels = comparisonLabels;
  }

the line where it breaks is

var giftBChecked = this.config.giftFeatures[giftB].indexOf(i) < 0 ? '' : checkimg;

It says "Object doesn't support property or method 'indexOf'

The script has no errors in Chrome and Firefox. I'm able to get indexOf on giftFeatures[giftB], but not in IE.

Does your page run in compatibly mode? `indexOf` doesn't exist in IE8, but should in IE11. See [Why doesn't indexOf work on an array IE8?](http://stackoverflow.com/questions/3629183/why-doesnt-indexof-work-on-an-array-ie8?rq=1) for a possible solution if you want your page to be run in compatibility mode. — Felix Kling, Mar 03 '15 at 18:54
@user3784238: Then you shouldn't get that error, because `indexOf` on arrays is supported since IE9. Either you are not getting the error or you are wrong ;) — Felix Kling, Mar 03 '15 at 18:57
In the debugger, verify what the actual object `this.config.giftFeatures[giftB]` is - see if it's an array, or something else. — Joe Enos, Mar 03 '15 at 18:59
It's an array in Chrome. I don't know why it would be different in IE, but I'm having trouble testing. I had to add a line to see what the value was in the Chrome debugger, but the IE debugger won't let me add any lines :\ — Erica Stockwell-Alpert, Mar 03 '15 at 19:09
Maybe my comment wasn't clear. If the page is executed in compatibility mode, you are basically using JS as it is implemented in IE8. IE8 doesn't support `indexOf` for arrays (i.e. the method doesn't exist, just like the errors message says), and hence you get the error. *edit:* Or is it called quirks mode, one "compatibility mode"? — Felix Kling, Mar 03 '15 at 19:11

score 2 · Accepted Answer · edited May 23 '17 at 11:50

2

You should define the method indexOf when it doesn't exist:

if (!Array.prototype.indexOf) {
    Array.prototype.indexOf = function(obj, start) {
        for (var i = (start || 0), j = this.length; i < j; i++) {
            if (this[i] === obj) {
                return i;
            }
        }
        return -1;
    }
}

You should also check this question which has multiple solutions to this problem.

edited May 23 '17 at 11:50

Community

1
1

answered Mar 03 '15 at 18:57

Catalin MUNTEANU

5,618
2
35
43

Wait, nevermind it didn't work... I checked the value of giftBChecked, and it is indeed an array. I'm super confused, because the live site (which has the latest changes) still isn't working, but a local version is. Furthermore, other pages on the site that use this exact script have no errors in IE. – Erica Stockwell-Alpert Mar 03 '15 at 19:45
it sounds like you're having a caching issue (try a forced-refresh), or haven't deployed all your changes, or you have some intermediary service (maybe your host) injecting code. We can't really help with those sorts of things. – Dave Mar 03 '15 at 19:52
I checked the javascript file in the debugger, and my changes are there, so it's not a cache issue. I posted links to two of my live pages, one where it's working and one where it's not. if anyone could look at them in IE and help me figure out what's wrong I would really appreciate it – Erica Stockwell-Alpert Mar 03 '15 at 20:00

indexOf causing error in IE; working in other browsers

1 Answers1