JavaScript Support and Array.indexOf in IE
JavaScript 1.6 was released in November 2005, and even though Internet Explorer 7 was released almost a year later in October 2006, it still uses the older JavaScript 1.5. I only discovered this fact recently when I started using Array.indexOf() in some lightbox code. It was all working fine in Firefox, but as soon as I started testing it in IE, it stopped!
indexOf() returns the index of the first occurrence of an item in an array. Previously we would have needed to write something like:
searchString = 'red';
colours = ['green', 'red', 'blue', 'red', 'orange'];
var found = -1;
for (var i = 0; i < colours.length; i++) {
if (colours[i] == searchString) {
found = i;
break;
}
}However, now with Array.indexOf(), it's much simpler:
searchString = 'red';
colours = ['green', 'red', 'blue', 'red', 'orange'];
var found = colours.indexOf(searchString);Except, IE doesn't support it! It's also quite likely that Opera and Safari don't support it also, but the following methods should work for all of these browsers:
if (!Array.indexOf) {
Array.prototype.indexOf = function (obj, start) {
for (var i = (start || 0); i < this.length; i++) {
if (this[i] == obj) {
return i;
}
}
return -1;
}
}While looking into this issue, I learned a lot more about JavaScript versions and its history. For example, what do the JavaScript versions mean? And why don't all browsers implement them? JavaScript was originally developed by Netscape back in 1995. At the time it was called LiveScript, but was later renamed to JavaScript in a co-marketing deal between Netscape and Sun. Due to the widespread success of JavaScript, Microsoft developed their own compatible version and called it JScript. Netscape then submitted JavaScript to Ecma International for standardisation resulting in the standardised version named ECMAScript. EMCAScript is the recognised standard and the latest version of it is implemented by all modern browsers, including IE 6+, Firefox 1+, Opera and Safari.
The latest version of ECMAScript is 3 and it corresponds to JavaScript 1.5. JavaScript 1.6-1.9 are just code names for the interim versions of ECMAScript (implemented by Gecko browsers) that are leading up to JavaScript 2 (EMCAScript 4), and so other browsers are not obligated to implement them. However, Opera and Safari both implement some of the additional features (but not all) introduced in JavaScript 1.6 - 1.9.
The next version of ECMAScript, version 4, is still a work in progress, but is expected to be published in October later this year. More details on the ECMAScript 4 proposal can be found here.
When prototyping, the new method should extend all the functionality of the existing method, in order to use it completely transparent. In this case, the "start" parameter is missing. Obviously, no such a big deal but being perfectionists…
Also, it should return -1 in the case the item is not found.
hi all..can anybody show me an example on how to use this function..
I remember that this was an advertised feature in the early days of javascript; you could find some discussion about it in early Netscape javascript references. So after a long hiatus from javascript, it came as a surprise to find no mention of this in the javascript 1.5 reference. But anyway, if you want to get the last word on the matter, just download the ecmascript standard.
you rock... i was absolutely stumped on why this wasn't working... and after a lot of debugging realized (of course) that it was simply lack of support by IE for the .indexOf function!!! a quick search turned up your page... and a quick copy/paste took care of all my problems. :-) thanks a bunch!
has anybody had problems when looping over an array after defining this? in IE8 at least it adds another element to the array, so when using "for .. in" or even a regular for loop, the last element of every array is this function.
for (item in arr)
if (typeof(item) != 'function')
view.appendrow(item);
testing the typeof value like this is a workaraound, otherwise my appendrow function gets called an extra time, with the indexOf function being passed to it.
not sure if there's a way to get around this other than what i've found. has anybody else run into this problem?
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;
}
}
Thank you very much! It was driving me nuts :)
Thanks !!
I guess stella doesn't care that her .indexOf implementation is faulty otherwise she would take guidance from the helpful commenters.
Not noticing that there were new comments on an old blog post doesn't mean I don't care - just that I'm busy and didn't notice those comments as they came in. In any case fixed now.
Great solution, Stella. I was pulling my hair out trying to use a Mozilla prototype that kept failing on IE 7. This worked without a hitch. Now I can go to lunch without stressing. :)
Thanks again!!!
personally, i like:
Array.prototype.indexOf |= function(item, start) { for (var i = start || 0; i < this.length; i++) if (this[i] == item) return i; return -1;}
when and where to use this function??
i hav this function
function callBack_LoadDepartment(result) {
var objDept_DeptGrp = result;
var chk = jQuery('input[type=checkbox][id$="chkCDDept"]');
jQuery.each(chk, function() {
if (typeof objDept_DeptGrp != "undefined" && objDept_DeptGrp.length > 0 && objDept_DeptGrp.indexOf(this.value) > -1) {
this.checked = true;
}
else
this.checked = false;
});
BrandManagerService.GetActiveDepartmentInCity(DG_ID, callBack_GetActiveDepartmentInCity)
}
i can figure it where to put ur function plz help!!!!
Thank you so much, you saved me, stupid IE always gives trouble.
thx a lot
Sorry. Please can you show how this solution can be used in code example.
For example instead of
word = ["H","O","O","T","E","R"];
letter = "g";
if ( word.indexOf(letter) == -1 ) {
alert ("not found")
}
else {
alert ("found at position " + word.indexOf(letter) ) ;
}
How would the code read ?
Thanks.
for all those who don't know where to put this code, just put it on the top of your JS file. What this code does is that if the Array object doesn't have an indexOf function (which is the case with the older version of Javascript used by IE), then it defines a function which replicates the behavior of indexOf. So you can use indexOf now and it will work in any browser!
Thanks for the post. was quite helpful.
Regards,
Farish