URGENT:eval() not working in Firefox

[mehulmistry]

hi all,
I'm having a strange problem with eval function in firefox. I've a javascript function where in i'm setting the display property to inline or none.
This works perfect in IE. but whe I opened my page in Firefox, its not working. I tried to put some alert() at various places in the function, and found that it stops at a line before eval() function.

I wanted to know is there any equivalent way for this function.Or I'll have to change it....I'm going nuts, to figure it out.Please help......

Thanks.

[Twey]

The only time that eval() is ever necessary in JS is when parsing code from an external source, such as JSON. There is almost certainly a better way to do whatever it is you're attempting to do. We can't tell you what it is without seeing the code, though.

[mehulmistry]

Hi,
Well I've few rows in my page, whose display property i'm setting through.
For example,I've row as...

<tr id="trColaspe1" style="display:inline;"><td>........</td></tr>
<tr id="trColaspe2" style="display:none;"><td>........</td></tr>

Now on click on an image, i'm calling a javascript function to change the style settings with eval(). Example.....

eval("trColaspe1.style.display='none'");
eval("trColaspe2.style.display='inline'");

This is working perfectly fine in IE. but in firefox, the function stops at this point.

I hope, I was able to explain what you wanted to know.

Thanks.

[Twey]

No, not really. You've got a lot of bad coding practices going on. Never access elements as global objects (this will actually throw a warning in Firefox, it's so outdated), and there's absolutely no reason to use eval() there. Also, table rows shouldn't have display: inline; (or at least, not if you want them to behave like table rows); they should have display: table-row; by default in CSS2-compliant browsers, although IE treats them as "inline with magic." The safest option is to set display to an empty string, which will revert the property to its default value:

document.getElementById("trColaspe1").style.display = "none";
document.getElementById("trColaspe2").style.display = "";

[mburt]

Technically, you should use the table.rows[index].cells[index] method, and give the table an id.

[Twey]

I don't know about "technically should..." it would be better in some cases, but using getElementById() to obtain the row directly can be fine, if not quite as neat.

[mehulmistry]

Hey thanks a lot Twey,
I did change that eval to getElementById(), and it works.And i'll do check out with that "inline", property.

Thanks again...

[mehulmistry]

Yes.. display="" instead of inline. works perfect.


Thanks a lot again....

:-)

[jscheuer1]

LOL,

Now that this is solved, and I have no problem with the solution (for backward compatibility though, using the rows collection would be a better approach, as would object testing), I would like to point out that in IE:

trColaspe1.style.display='none';
trColaspe2.style.display='inline';

should work just as well as:

eval("trColaspe1.style.display='none'");
eval("trColaspe2.style.display='inline'");

And, just as poorly in other browsers.

[mburt]

I believe that point has already been established, but document.getElementById() should be used in all cases.