prototype.js issue: IE thinks $() ain't the same as document.getElementById()

[Phlip]

[X-posted to the ruby-on-rails-spinoffs mailing list...]

JavaScripters:

Steps to reproduce the bug:

Save this in "outer.html":

<div id='updateMe'></div>
<iframe src='inner.html'/>

Now save this into "inner.html":

<input type='button' value='control'
onclick="window.parent.location.href =
&quot;javascript:void(document.getElementById('updateMe').innerHTML
= 'control')&quot;"/>

<script src="/javascripts/prototype.js?1168956448"
type="text/javascript"></script>

<input type='button' value='experiment'
onclick="window.parent.location.href =
&quot;javascript:void($('updateMe').innerHTML =
'experiment')&quot;"/>

Surf Internet Explorer (7 BTW) to outer.html, and observe two buttons.

Click 'control', and observe that the outer.html's div updates to 'control'.

Observed behavior:

Click 'experiment', and observe a null-object crash. $() could not find the
same value as getElementById().

Expected behavior:

Because the javascript:void trick evaluates in the context of the target
frame (not the source frame), the behaviors of $() and getElementById()
should be exactly the same inside the javascript:void() line as inside the
target frame, right?

(BTW I suspect from related evidence that the code "works" in Firefox...)

 

[Ian Collins]

[X-posted to the ruby-on-rails-spinoffs mailing list...]

Mention of prototype.js in these parts is a great way of bringing down a
ton of bricks!

 

[RobG]

[X-posted to the ruby-on-rails-spinoffs mailing list...]

Not cross-posted, multi-posted. Your answer is in the rails spin-offs
group.

In short, it is bleedin' obvious that Prototype's $() is not the same
as getElementById(), nor is simply a short substitute (though it can
be, and often is, used as such).

Your "bug" is not a bug but a misconception on your behalf.