array declaration on FF vs IE

[james_027]

hi,

There is something that I don't understand well, I use array for
combining strings like

items = ['hello world', ', how are you', '?', 'the end'].join('');

in FF this works well but in IE I had to add something like this

var items = new Array();
items = ['hello world', ', how are you', '?', 'the end'].join('');

My question is why is there a need for var items = new Array(): and
why items = new Array(); doesn't work? I don't want the items to be a
global variable, since it was declare inside a function I want it to
be local only

Thanks
james

 

[james_027]

Hi,

In what IE? This code:

items = ['hello world', ', how are you', '?', 'the end'].join('');
alert(items)

alerts what I would expect: "hello world, how are you? the end". Which
is the same exact results Firefox gives. Even typeof items gives
"string" in both.

My question is why is there a need for var items = new Array():

I have something like this (i am using jQuery)

var add_invoice_item = function(selected, unit){
counter = parseInt($('input[@name=invoice_item_counter]').val(),10);
counter +=1;
$('input[@name=invoice_item_counter]').val(counter);
//var invoice_item = new Array();
invoice_item = [
'<tr id="invoice_item',counter,'">',
'<td><input type="hidden" name="invoice_item',counter,'.item"
value="',$('input[@id='+selected+'.id]').val(),'"></td>',
'<td><input type="hidden" name="invoice_item',counter,'.unit_mode"
value="',unit,'"></td>',
'<td><input type="text" name="invoice_item',counter,'.quantity"
onchange="calculate_total(this)"></td>',
'<td><input type="text" name="invoice_item',counter,'.unit"
value="',$('a[@id='+selected+'.'+unit+']').html(),'"></td>',
'<td><input type="text" name="invoice_item',counter,'.description"
value="',$('td[@id='+selected+'.description]').html(),'"></td>',
'<td><input type="text" name="invoice_item',counter,'.discount"
value="',$('td[@id='+selected+'.discount]').html(),'" READONLY></td>',
'<td><input type="text" name="invoice_item',counter,'.price"
value="',$('td[@id='+selected+'.price]').html(),'" READONLY></td>',
'<td><input type="text" name="invoice_item',counter,'.subtotal_"
value="0" READONLY></td>',
'<td><a
href="javascript:remove_invoice_item(\'invoice_item',counter,'\');">Remove</
a></td>',
'</tr>'
].join('');

$('tbody[@id=invoice_item]').append(invoice_item);
$('div[@id=item_lookup_result]').empty();

}

and this function is called by <a
href="javascript:add_invoice_item(this.class, 'LOO')">Unit</a>

if the var invoice_items = new Array(); is commented it won't work in
IE6 saying "the object doesn't support this property or method" but
when it is uncommented it works.

thanks
james

 

[Gregor Kofler]

james_027 meinte:

if the var invoice_items = new Array(); is commented it won't work in
IE6 saying "the object doesn't support this property or method" but
when it is uncommented it works.

In this case invoice_item becomes a *global* variable. var invoice_items
= [...] will work.

Gregor

 

[pr]

james_027 wrote:
....

I have something like this (i am using jQuery)

var add_invoice_item = function(selected, unit){
counter = parseInt($('input[@name=invoice_item_counter]').val(),10);
counter +=1;
$('input[@name=invoice_item_counter]').val(counter);
//var invoice_item = new Array();
invoice_item = [
'<tr id="invoice_item',counter,'">',
'<td><input type="hidden" name="invoice_item',counter,'.item"
value="',$('input[@id='+selected+'.id]').val(),'"></td>',
'<td><input type="hidden" name="invoice_item',counter,'.unit_mode"
value="',unit,'"></td>',
'<td><input type="text" name="invoice_item',counter,'.quantity"
onchange="calculate_total(this)"></td>',
'<td><input type="text" name="invoice_item',counter,'.unit"
value="',$('a[@id='+selected+'.'+unit+']').html(),'"></td>',
'<td><input type="text" name="invoice_item',counter,'.description"
value="',$('td[@id='+selected+'.description]').html(),'"></td>',
'<td><input type="text" name="invoice_item',counter,'.discount"
value="',$('td[@id='+selected+'.discount]').html(),'" READONLY></td>',
'<td><input type="text" name="invoice_item',counter,'.price"
value="',$('td[@id='+selected+'.price]').html(),'" READONLY></td>',
'<td><input type="text" name="invoice_item',counter,'.subtotal_"
value="0" READONLY></td>',
'<td><a
href="javascript:remove_invoice_item(\'invoice_item',counter,'\');">Remove</
a></td>',
'</tr>'
].join('');

$('tbody[@id=invoice_item]').append(invoice_item);
$('div[@id=item_lookup_result]').empty();

}

and this function is called by <a
href="javascript:add_invoice_item(this.class, 'LOO')">Unit</a>

if the var invoice_items = new Array(); is commented it won't work in
IE6 saying "the object doesn't support this property or method" but
when it is uncommented it works.

I would suspect one of your calls to a $() method is failing during
creation of the array. Try separating them out and checking them.

 

[Henry]

james_027 meinte:

if the var invoice_items = new Array(); is commented it won't
work in IE6 saying "the object doesn't support this property
or method" but when it is uncommented it works.

In this case invoice_item becomes a *global* variable.
var invoice_items = [...] will work.

To which it would be possible to add an explanation of why that might
make a difference on IE and not necessarily matter on other browsers.
It will be because the HTML contains an element with an ID attribute
set to "invoice_item" and when that is the case IE adds a reference to
the DOM element as a named property of the global object under the
name "invoice_item" and makes that property read only. Thus the array
does not get assigned to the property of the global object when -
invoice_items = [...]; - is executed, and subsequent attempts to call
array methods on an object that remains an Element result in the
(accurate) error "object doesn't support this property or method".

There are two ways of avoiding this issue. The first is, as suggested,
declaring the - invoice_items - in the functions so it masks the
property of the global object. The other is to explicitly declare -
invoice_items - as a global variable. If that is done IE does not use
the existence of an element in the DOM with a corresponding ID
attribute as an excuse for creating a property of the global object,
and so the resulting declared global variable has no DOM Element
reference assigned and it remains read/write.

The whole issue is avoided by following the 'best practice' advice of
always explicitly declaring all variables.

 

[Gregor Kofler]

Henry meinte:

[intersting explanation snipped]

The whole issue is avoided by following the 'best practice' advice of
always explicitly declaring all variables.

That's perhaps the reason, why I've never encountered this problem.
Anyway, interesting to learn about another absurdity of the IE JS and
DOM implementation.


Gregor