Javascript Variables and Firefox

[scotty]

I have a script that loops through an existing table list and prepares
each href element node to trigger a function when an image is
clicked. The function that will be run passes a property value to the
function upon clicking. The property value is one of the attributes
defined for each respective href in the property list.

In IE and Netscape, the property values pass correctly, but in
Firefox, only the last property value in the list of properties is
passed to the function. Even if you click on an image at the top of
the list, still only the property number associated with the last list
item is passed.

The purpose of the script is to access data regarding the property
from an Object that was created prior. I use the property number
attribute to know which object item to access. I could also define
all the property data as attributes for each item in the list, but I
would still have the same problem: Firefox would only grab the values
from the last listed item. The purpose of this exercise is to not
have to go back to the server since the data has been transferred into
Javascript.

I can get the property number into a get variable in a hard coded
link, but this would go back to the server. I think that using any
self functions would still pose the same problem since I would still
have to place the property number in the function. Is there any way
to break the reference associated with this type of variable and
access it later in Firefox, to hard code it into a function for
subsequent clicking which IE and Netscape allows you to do?

Thanks for any help.

 

[Martin Honnen]

I have a script that loops through an existing table list and prepares
each href element node to trigger a function when an image is
clicked. The function that will be run passes a property value to the
function upon clicking. The property value is one of the attributes
defined for each respective href in the property list.

In IE and Netscape, the property values pass correctly, but in
Firefox, only the last property value in the list of properties is
passed to the function. Even if you click on an image at the top of
the list, still only the property number associated with the last list
item is passed.

Show us the relevant JavaScript code and HTML. You might be using a
closure although it is not clear to me why you get different results
between IE and Firefox and particular between Netscape and Firefox.

 

[scotty]

/* properties is an object that I carry through the functions that
does not
impact the problem. see below, and thanks */

function prepare_to_show_properties(properties)
{
if(!document.getElementsByTagName) return false;
if(!document.getElementById) return false;

links=document.getElementsByTagName("a");
row_at='odd';
for(d=0;d<links.length;d++)
{
if(links[d].getAttribute('prop'))
{
links[d].onclick=function()
{
show_prop(this,properties);
return false;
}
links[d].onmouseover=function()
{
show_thumb(this);
}

link_parent=links[d].parentNode;
cell_parent=link_parent.parentNode;
if(row_at=='odd')
{
cell_parent.onmouseout=function()
{this.className="js_row_odd";}
row_at='';
}
else
{
cell_parent.onmouseout=function()
{this.className="js_row_even";}
row_at='odd';
}
cell_parent.onmouseover=function(){this.className="js_mouseover";}
}
}
}



Thanks for the response:

show_prop(this,properties); >> appears to be the offending line
for Firefox. "This" is the actual 'a' element and any of its
attributes which have been defined earlier:

a.setAttribute('prop', prop);

With IE, the function show_prop ushers in both objects just fine.
When I then use "alert(prop.prop)", or "alert(this.prop)", Windows and
Netscape both announce the correct property number no matter what line
I click on. Firefox does not. It announces the last property number
in the list no matter what link I click on. With IE I am able to stay
completely client. I have not been able to do so with Firefox.
Again, I have tried everything imaginable to try and get Firefox to
load a function as indicated. This is frustrating. By the way, the
show_thumb function above is also impacted by this
problem in Firefox as you might imagine.

One note, I rebuilt my page specifically in Firefox, making sure of
"well-formedness", etc. not thinking that this would help, but I
really like the resulting layout, and I end up with the same issue.

Scott

 

[RobG]

/* properties is an object that I carry through the functions that
does not
impact the problem. see below, and thanks */

Please don't top-post, reply below trimmed quotes.

function prepare_to_show_properties(properties)
{
if(!document.getElementsByTagName) return false;
if(!document.getElementById) return false;

links=document.getElementsByTagName("a");

It is bad to allow variables that should be kept local to slip into
the global space, use var to keep them local. Also, the document
object has a links collection that you can use without resorting to
getElementsByTagName:

var links = document.links;

row_at='odd';
for(d=0;d<links.length;d++)

It is especially bad to allow counters to slip into the global space.

var row_at='odd';
for(var d=0; d<links.length; d++)

{
if(links[d].getAttribute('prop')) {
links[d].onclick=function() {
show_prop(this,properties);

This will create a closure back to the properties variable of the
prepare_to_show_properties() function. All onclick functions will have
a reference back to the same object.

I have re-formatted the following to be easier to read (for me)

return false;
}
links[d].onmouseover=function() {
show_thumb(this);
}

link_parent=links[d].parentNode;
cell_parent=link_parent.parentNode;
if(row_at=='odd') {
cell_parent.onmouseout=function() {
this.className="js_row_odd";
}
row_at='';
} else {
cell_parent.onmouseout=function() {
this.className="js_row_even";
}
row_at='odd';
}
cell_parent.onmouseover=function(){this.className="js_mouseover";}
}
}
}

Thanks for the response:

show_prop(this,properties); >> appears to be the offending line
for Firefox. "This" is the actual 'a' element and any of its
attributes which have been defined earlier:

a.setAttribute('prop', prop);

It will be much easier to work out what's happening if you show the
function that sets the attribute, and what show_prop() is doing with
it. As Martin said, you are describing classic symptoms of an
unexpected closure that is making the value of some variable different
to what you think it will be.

Try posting a minimal, working example that demonstrates the error or
a link to a similarly minimal page.

With IE, the function show_prop ushers in both objects just fine.
When I then use "alert(prop.prop)", or "alert(this.prop)", Windows and
Netscape both announce the correct property number no matter what line

What property number? You didn't say what is in the "properties"
object. Apparently it was irrelevant, but now it is?

I click on. Firefox does not. It announces the last property number
in the list no matter what link I click on.

Yup, there's a closure somewhere that you don't expect. Why it is
behaving differently in IE/Netscape to Firefox is impossible to say at
this point.

 

[RobG]

What property number? You didn't say what is in the "properties"
object. Apparently it was irrelevant, but now it is?

Since you appear to be setting non-standard properties on HTML
elements, try:

alert(this.getAttribute('prop'));


The closure issue might be a red herring.

 

[scotty]

Since you appear to be setting non-standard properties on HTML
elements, try:

alert(this.getAttribute('prop'));

The closure issue might be a red herring.

I really appreciate your response and advice. Thank you. I cleaned
things up a bit with some of your suggestions.

Also, I wanted to let you know that you solved the problem with the
following:

this.getAttribute('prop')

Instead of "this", I have to use the name I gave the function
argument, so used:
var prop = property.getAttribute('prop');

Thank you very much.

Scott

 

[Isaac Schlueter]

The closure issue might be a red herring.

I totally agree, Rob--the closure might not be the source of the bug,
and without being able to actually see the difference, it's hard to
say. (I also agree with all your other comments on this code.)

On the other hand, even if the closure doesn't cause the bug in
question, this particular closure will produce a circular DOM-JS link,
leading to a memory leak in IE6.

Simpler example:

(function(){
var x=document.getElementsByTagName('a')[0];
x.onclick=function() {
// ...
};
})();

In this case, the leaked nodes are cell_parent and link_parent, since
there is never a reference directly to the link itself. Setting
cell_parent to null at the end of each loop would break the cycle and
prevent the leak. (Oh, how I long for the day when IE6 falls into the
void of time like NN4 and IE3 and we no longer have to cater to faulty
garbage-collection mechanisms.)

--i