Interface - Array broken on IE6/Safari/Konqueror (indexof)

[wccrawford]

The 'older browser helper' function in iutil.js causes arrays to exhibit odd behavior in IE6, Konqueror, and Safari. (I don't have Safari, but a co-worker showed me it's failure in it.) Firefox works fine.

The following code will exhibit the bug.

<script type="text/javascript">
// Helper function to support older browsers!
var arr = new Array();
if (!new Array().indexOf)
{
	Array.prototype.indexOf = function(v, n){
		n = (n == null) ? 0 : n;
		var m = this.length;
		for (var i=n; i<m; i++)
		{
			if ((i >= 0) && (this[i] == v))
			{
				return i;
			}
		}
		return -1;
	}
}

var arr = new Array();
arr['a'] = 'A';
arr['b'] = 'B';
arr['c'] = 'C';
arr['d'] = 'D';
for(i in arr)
{
	document.write(i);
	document.write(arr[i]);
}
</script>

Firefox outputs 'aAbBcCdD' as expected, but the other browsers output 'indexOffunction (v, n) { n = n == null ? 0 : n; var m = this.length; for (i = n; i < m; i++) { if (i >= 0 && this[i] == v) { return i; } } return -1; }aAbBcCdD'.

[wccrawford]

I just realized I had changed the javascript attempting to find the problem. The original javascript is:

// Helper function to support older browsers!
[].indexOf || (Array.prototype.indexOf = function(v, n){
	n = (n == null) ? 0 : n;
	var m = this.length;
	for (var i=n; i<m; i++)
		if (this[i] == v)
			return i;
	return -1;
});

It does, of course, exhibit the same problem.

[khmer42]

This doesn't break all arrays, only associative arrays. Remember arrays in JavaScript aren't really arrays, they are just objects presented in an array like way. Doing a for/in loop will return all properties of the array including prototype methods, which is what's happening here. There are only three ways this can be solved, none of which are particularly practical or helpful:

• Stop using IE until they one day implement indexOf for arrays.
• Tell all users that if they use associative arrays in their code interface will break their apps.
• Re-write any interface modules that use indexOf on an array, to use a separate method which can be passed an array and perform the same task, rather than adding a new method to all arrays which fixes one problem but creates a multitude of others.

I personally think the last option would be the best and most practical, interface won't go far if it breaks existing JavaScript functionality. We all know that using associative arrays in JavaScript isn't 'best practice', but it is still common place, so must be addressed.

[wccrawford]

Well, the conclusion that I came to was that this should -not- be included for IE6/Safari/Konqueror as they do -not- need it. It's only older browsers that need it. Without this code, they all work fine.

To be sure, I just tested it in IE6 and IE7. They both exhibit the same behavior. Without the overridden indexOf, they both work fine. With it, they both produce the problem.

So add IE7 to the list of affected browsers as well.

Again, the real fix here should be to make sure that the code is only included on browsers that actually need it.

[shula]

A quick workaround: either add browser specific validation (for IE and other broken browsers), or comment out the whole block below: " Helper function to support older browsers".

[scott.gonzal]

Interface is no longer supported; consider switching to  jQuery UI.