Safari Array indexOf fails to find anything - javascript

When I evaluate the following javascript in Safari 6.0:
Array.indexOf([1,2,3],3)
It returns -1, essentially saying that 3 is not in the array!
But in Firefox it correctly returns 2.
I know that Array.indexOf is a relatively new function so I have code that tests if it is present and if not defines it. However it appears this function is built in to Safari.
Is this a bug, or am I doing something wrong?
Edit: This is actually a simplified version of the problem. What I am actually doing is trying to locate the index of a TD cell in a TR:
var tr = td.parentNode
var col = Array.indexOf(tr.cells,td)
tr.cells does not have an indexOf. But, using Array.indexOf I can treat it as such, at least in Firefox. In Safari this does not work.
I guess in this case I could actually use cellindex, but if that was not defined, how would I go about getting the index?

I'm wondering why you don't use it like intended:
[1,2,3].indexOf( 3 );
Unless it's an academic question. In that case it's actually a bug special Firefox implementation. If you want to use the Array.prototype version directly, you should go like
Array.prototype.indexOf.call([1,2,3], 3);

Related

Does this kind of value setting work in Javascript?

I'm trying to create code that requires the least number of bytes and that works for all browsers including IE 7.
In this example, the program calls dosomething('x1') and dosomething('x2').
If I have code like this:
var items,item,index,count;
items=Array('x1','x2');
count=items.length;
for (index=0;index<count;index++){
item=items[index];
dosomething(item);
}
Could I reduce it to this and have it still function exactly the same in all browsers:
var a=Array('x1','x2'),c=a.length,i;
for (i=0;i<c;i++){
f(a[i]);
}
I understand I changed the variable names and calling function name but my goal is to use the least number of bytes possible in the code to make the code execute.
I'm just not sure if declaring a variable equal to a property of a value from a previous variable in the same list of declarations would actually return correct results.
In other words, does var a=Array('x1','x2'),c=a.length... work, or do I have to specifically do var a=Array('x1','x2');var c=a.length; to make it work in all browsers including IE 7?
This is what the Google Closure Compiler service returned:
var a,b,c,d;a=["x1","x2"];d=a.length;for(c=0​;c<d;c++)b=a[c],dosomething(b);
You can find many different Javascript compressors online to automate the process you are hand coding now. Yet, it's always good to understand how they work as it helps to write code that is better compressed.
As for IE, you can test your code by changing the emulations settings in the IE debugger panel. Just press F12, click the Emulation tab, and adjust the document mode to 7 (IE7).
Hope this is enough to get you started in the right direction.
You can use Array.map from IE 9
var items = Array('x1','x2');
items.map(dosomething(item));

jQuery $.map works in IE8 but not IE7

Using jQuery 1.9.1 & IE8, but the page also needs to work in IE7. In code before the part that is causing the issue, I read some data in & build an array that is a SELECT statement. In the section of code where I have an issue, I am doing the following:
var found = $.map( mySelArr, function(val) {
return val.mySelID === zSelID ? val.mySelStatement: null;
});
I then reference it:
var selStmt = found[0];
(there will be only 1 returned, and I know it will be in the array).
In IE7, I saw that it is throwing an exception inside jquery.js. When I step through debug on it, I see that the found length is zero (in IE7). If I change the mode to IE8, everything works fine. But in IE7, nothing gets put into the found variable.
What am I doing wrong to not be able to get this array value out in IE7? Would appreciate any thoughts.
EDIT
mySelArr is an array of Select statements, similar to:
1,<select name='mySelID_1' id='plist' ><option selected='selected' disabled='disabled' value='0'>Select Action</option><option value="1">This one</option><option value="2">That one</option></select>
and so on.
EDIT 2
I may have stumbled on the issue.
The array that held the select statements was being populated correctly in IE8, but not in IE7.
I actually had 2 arrays, one being just a number, and the other being that same number + the Select statement. The array that had the index & select statement was built using:
arr1.push({ fld1:data1, fld2:selstmt})
The one with just numbers was built using:
arr2.push(arrndx)
The arr2 was the outer FOR, the arr1 was the inner FOR. I had been referring to the number index by using:
var z = arr2[x][0];
to get the number & then using that to loop thru arr1 to get everything matching it & building the Select statement. What I discovered was that IE7 was returning undefined in the line of code above, while IE8 was returning the number (Firefox also).
I changed 2 lines of code to fix the issue:
FROM arr2.push(arrndx)
TO arr2.push( {arrindex: arrndx} );
and
FROM arr2[x][0]
TO arr2[x].arrindex
and it works in both IE7 & IE8. IE7 didn't have a problem creating that array, or reading it - it just wasn't valid data in it because of how I attempted to reference the fields in it.
I'm not exactly sure why IE7 had a problem with it & IE8 didn't, but.... Also, the fix didn't appear to break anything else.

Does Firefox browser not recognize table.cells?

I have the following JavaScript code.
var myCellCollection = document.getElementById('myTbl').cells;
This works well in IE and it returns a collection of table cells. But the same line returns "undefined" in Firefox. I am using IE 9 and Firefox 12.
You should use document.getElementById("myTbl").getElementsByTagName('td');
Stumbled into this today whilst porting an older Internet Explorer app.
Warning:
container.getElementsByTagName('tagname') returns ALL the elements inside container that matches the query tagname.
Thus table.getElementsByTagName('td') will return all td's including those of nested tables!
However table.cells doesn't do that (where implemented).
Also, obviously, it won't match th. So those cells are not in returned collection, optionally leading to the 'problem' of how to resolve their order relative to the td's...
To shim the expected functionality of table.cells (returning both th and td in DOM-order), I wrote the following simple function:
function tableCells(t){
if(t.cells) return t.cells; // use internal routine when supported
for(var a=[], r=t.rows, y=0, c, x; t=r[y++];){
for(c=t.cells, x=0; t=c[x++]; a.push(t));
}
return a;
}
Alternatively, using 'single return' by 'if-else' packs to the same size exactly, yet the above gzips smaller. PS: I tried concat-ting the table.rows[X].cells, but that didn't work (although I wouldn't feel safe doing so anyways)
Usage example:
var identifier = tableCells( /*reference to table (or thead/tbody/tfoot) here*/ );
It will return an array (not a live collection) like the result from table.cells.
Hope this helps someone

javascript options.length = 0 not working in IE9

I have a page that sets the length of a select list to 0 before it adds new options. This worked fine in all browsers until IE9. In IE9 I get the error: DOM Exception: NOT_FOUND_ERR (8). This is all I'm trying to do:
var typebox = document.sForm.ePosition;
typebox.options.length = 0;
Works fine in compatibility mode.
Try executing each piece in your console, and see where your exception is:
document.sForm
document.sForm.ePosition
document.sForm.ePosition.options
document.sForm.ePosition.options.length
I tried setting the length of options to 0, and was pretty surprised that it worked (in Chrome). Array.length should be a read-only property, in my opinion. I would use DOM code to remove the elements, something like this:
while (element.hasChildNodes()) {
element.removeChild(element.firstChild);
}
I was just struck by the same issue and found a convenient solution for those of us using jQuery:
$(selectObject).empty();
I've tested this in IE 7-9, FF 10.0 and Chrome 18 using jQuery 1.4.4.
Question was in pure javascript, please supply first a pure javascript reply. The users could not be interested in jquery since many embedded solutions can't use jquery.

Why does Internet Explorer not like this jQuery?

While debugging some jQuery that is not working in IE, I found this error message:
var item = $("#item_"+ itemArray[itemIndex]).find('a').text().trim();
Object doesn't support this property or method (script.js, line 100, character 2)
The character 2 doesn't make sense to me. Based on the text displayed character 2 would be the letter a in var but of course that doesn't make any sense.
(Should I not use var?)
I know that jQuery is working to some extent or the script would not have been able to get this far on my page.
IE doesn't have String.trim(), you'll need $.trim() (which uses native trim if available, emulates it in IE), like this:
var item = $.trim($("#item_"+ itemArray[itemIndex]).find('a').text());
IE doesn't have a trim method.
Instead, you can call jQuery.trim(...).

Categories