Prototype Freezing IE (6 & 7) when changing classNames.

[gee...@gmail.com]

I have a complete mystery with something happening in IE with
JavaScript... Firefox, Opera, Safari, Mozilla. They all work. Nothing
is showing up in firebug.

I'm using the prototype library, BUT, this also happens when I
hardcode everything document.getElementById.

The only way I can get this to work in IE is to have an Alert in the
TRUE block of the if/else. Does that even make sense? The Alert is
firing AFTER the className is set. So if the problems were arising
from setting the class name it would fail before getting to the alert.

There is no Exception thrown, there is no script error alert that pops
up or shows up in the lower left corner. IE just freezes.

I tried hacking around it using a hidden div, in hopes that would
replace the Alert, but that didn't work either.

The Script freezing. (I've tried several variations of this as well).

function openSummarySection(str) {
try {
var sub = str + "Sub";
//alert(str + "\n" + sub + "\n" + $(str).className + "\n" + $
(str).hasClassName('bar'));
// The above pops up with the correct values when not commented.
if ($(str).hasClassName('bar')) {
$(str).className = "bar_open";
$(sub).className = "bar_exposed";
// alert($(str).hasClassName('bar')); //<-- uncomment this line
and it works. What the christ?
} else {
$(str).className = "bar";
$(sub).className = "bar_hidden";
}

} catch(e) {

alert(e.description);

}
}

The HTML:
<div class="bar" id="BarPhysicalActivityId">
<div class="turndown"><ul class="postnav2"><li>
<a href="#" id="BarPhysicalActivityIdLink"
onclick="openSummarySection('BarPhysicalActivityId');return
false;"><img src="turn_up.gif"/></a>
</li></ul></div>
<div class="barlabel">Total Physical Activity</div>
<div class="bartarget">0000</div>
<div class="baractual">0000</div>
<div class="baractualmeasure3">&nbsp;</div>
<div class="barcomplete">&nbsp;</div>
</div>
<div id="BarPhysicalActivityIdSub" style="height:290px;"
class="bar_hidden">stuff</div>

I know this is a ridiculously simple thing to fix. But I'm completely
stumped.

[AMA3]

alert() statements have strange effects on problem scripts in general; when
that happens, I remove all of the debugging alert() statements and try to
find what's wrong without figuring them into the equation.

I suggest trying elem.classNames.set(x) instead of .className=x for your
assignments, and see if the problem goes away.

Peace,
AMA3

[Patrick Gostovic]

I had the same IE-only symptom a while ago. It appeared to happen
when a bunch of elements' style.display properties were changed some
time after a double-click.

Is there a double click handler somewhere in your code?

[Tom Gregory]

Why are you using $() everywhere? Do it once, and clean up your code.

var el = $(el);
var sub = $(str+'Sub');

if (el.hasClassName('bar')) {
el.className = 'bar_open';
.... // etc.

TAG

[gee...@gmail.com]

I tried .set(x) a try and IE does not support this object / method.

After I posted, I went back to prototype 1.4.0 and the problem ceases.

I'm not sure what the problem is... I added the Hash object (from 1.5)
into 1.4 and immediately got the same problem. That doesn't mean
that this is the only object that is part of IE's problem. The Hash
objects methods have been working. But it seems to be interfering
with other methods / objects.

(I liked the new methods available in the Hash object).

Thanks!,

[gee...@gmail.com]

I admit, I got a little sloppy when trying to figure out just what the
hell was going on. This has been bugging me for 2 days. I was trying
a variety of things / anything really to see what the issue was.

And I was premature on my last message. The error is still
happening. And nothing has been changed since. God, I love Internet
Explorer.

On May 1, 4:43 pm, Tom Gregory <t...@byu.net> wrote:
> Why are you using $() everywhere? Do it once, and clean up your code.
>
> var el = $(el);
> var sub = $(str+'Sub');
>
> if (el.hasClassName('bar')) {
> el.className = 'bar_open';
> .... // etc.
>
> TAG
>

[Tom Gregory]

Hrrrm... I reread your quote of my reply, and it came across a bit
abrasive. Sorry about that.

I didn't see anything wrong with the Javascript, but I think I know
what's going on.

It's been my experience that calling alert() in IE during an event
callback does weird things.

Instead of assigning the onclick event inline in your HTML, use the
Prototype event observer and extended event model:

// in a script *after* the <a> element is defined
// Again, this code hasn't been tested. You may have to debug a bit
Event.observe('BarPhysicalActivityIdLink', 'click', function(evt) {
evt.stop();
openSummarySection('BarPhysicalActivityId'); // actually, just drop
the contents of this function here
});

[gee...@gmail.com]

No worries about that!

I'll try the above tonight or tomorrow. For now, I just removed
prototype.js altogether (except $() ). I started adding piece by
piece the rest of the script and it froze right after I added the Hash
object and methods (in both 1.4 & 1.5). I submitted a bug for that.
Though it's a shame it's because of IE's faulty implementation of
JavaScript.

Ah well,

Cheers!

On May 1, 5:37 pm, Tom Gregory <t...@byu.net> wrote:
> Hrrrm... I reread your quote of my reply, and it came across a bit
> abrasive. Sorry about that.
>
> I didn't see anything wrong with the Javascript, but I think I know
> what's going on.
>
> It's been my experience that calling alert() in IE during an event
> callback does weird things.
>
> Instead of assigning the onclick event inline in your HTML, use the
> Prototype event observer and extended event model:
>
> // in a script *after* the <a> element is defined
> // Again, this code hasn't been tested. You may have to debug a bit
> Event.observe('BarPhysicalActivityIdLink', 'click', function(evt) {
> evt.stop();
> openSummarySection('BarPhysicalActivityId'); // actually, just drop
> the contents of this function here
>
> });
>

[gee...@gmail.com]

Sorry for the drama about this, everyone. But turns out it was my own
fault and another scriptlet that was causing the error - not
prototype.

It was an IE specific problem, but only when it came to using the
<object> instead of <applet> and the JavaScript that interacted with a
Java applet on the same page. It wasn't a collision of method names
or variables, just something that wouldn't work together. Shame for
IE.