#56 Browsers, except IE, cannot use inline function calls with the same name as methods contained on Element.methods - Prototype

Type	To find
responsible:me	tickets assigned to you
tagged:"@high"	tickets tagged @high
milestone:next	tickets in the upcoming milestone
state:invalid	tickets with the state invalid
created:"last week"	tickets created last week
sort:id	tickets sorted by id (creation time)
Combine keywords for powerful searching.
Use advanced searching »

#56 doc

Browsers, except IE, cannot use inline function calls with the same name as methods contained on Element.methods

Reported by Kenneth Kin Lum | April 27th, 2008 @ 12:59 AM | in Inline documentation

there is a test script on

http://www.0011.com/js/is_it_a_b...

when the link on the page is clicked on, the alert will fire off in IE 7 but not inside of Firefox 2 or Safari 3.

when the line

is removed, then it will fire off in all 3 browsers.

Thanks a lot!

this is the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

prototype

function show(node) {

alert("you clicked!")

}

hello

src="http://www.w3.org/Icons/valid-html401"

alt="Valid HTML 4.01 Strict" height="31" width="88">

Comments and changes to this ticket

Kenneth Kin Lum April 27th, 2008 @ 01:00 AM

seems like the HTML needs to be quoted like this:


there is a test script on

http://www.0011.com/js/is_it_a_b...

when the link on the page is clicked on, the alert will fire off in IE 7 but not inside of Firefox 2 or Safari 3.

when the line 

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

is removed, then it will fire off in all 3 browsers.

Thanks a lot!

this is the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/stric...">
<html>
<head>
<title>prototype</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

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

<script type="text/javascript">
function show(node) {
    alert("you clicked!")
}
</script>
</head>

<body>
<p>
<a href="#" onclick="show(this)">hello</a>
</p>

 <p>
    <a href="http://validator.w3.org/check?ur... style="border:none"
        src="http://www.w3.org/Icons/valid-ht..."
        alt="Valid HTML 4.01 Strict" height="31" width="88"></a>
 </p>
  
  
 </body>
 </html>

Kenneth Kin Lum April 27th, 2008 @ 01:03 AM

wonder how come the link is shortened in the previous post:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/stric...">
<html>
<head>
<title>prototype</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

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

<script type="text/javascript">
function show(node) {
    alert("you clicked!")
}
</script>
</head>

<body>
<p>
<a href="#" onclick="show(this)">hello</a>
</p>

 <p>
    <a href="http://validator.w3.org/check?ur... style="border:none"
        src="http://www.w3.org/Icons/valid-ht..."
        alt="Valid HTML 4.01 Strict" height="31" width="88"></a>
 </p>
  
  
 </body>
 </html>

Kenneth Kin Lum April 27th, 2008 @ 01:06 AM
so what i mean was, when the line
```
<script src="prototype.js" type="text/javascript"></script>
```
is removed, then the alert will fire off in all 3 browsers....
Juriy Zaytsev April 27th, 2008 @ 03:49 AM
That's really weird.
Is it absolutely necessary to use "inline" handlers (onclick) instead of atatching observerers on page load via a separate script?
John-David Dalton April 27th, 2008 @ 06:50 AM
- → State changed from “new” to “bug”
- → Title changed from “is this a bug: function not invoked” to “Browsers, except IE, cannot use inline function calls with the same name as methods contained on Element.methods”
This behavior is caused because in all browsers except IE Prototype extends
the Element prototype which extends all dom elements.
When you call the "show" function inside the scope of the element it calls element#show()
instead of your function "show".
To test this rename the method "show2" and change the onclick="show2();" you will get the alert.
Rename the function to "identify" and and onclick="identify()" you won't
get an alert because its calling element#indentify()
IE will have same issue if the link ever gets extended like so:
```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stric...">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<head>
<title>prototype</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

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

<script type="text/javascript">

function identify(node) {
    alert("you clicked!")
}

document.observe('dom:loaded', function(){
  $('test');
});

</script>
</head>

<body>
<p>
<a id="test" href="#" onclick="identify()">hello</a>
</p>

</body>
</html>
```
I think this is a bug but won't be solved until a later version of Prototype.
darensta May 6th, 2008 @ 04:27 AM
I think it is working correctly, but the page is refreshing before the JS fires off.
your onclick should look like this:
onclick="identify(); return false;"
John-David Dalton May 6th, 2008 @ 05:08 AM
I still don't think it's working because if you change the method name to
something like "foo" which isn't an method of an extended element you will
get the alert before the page reloads.
frank kootte May 8th, 2008 @ 08:48 AM
In my humble opinion this is not actually a bug.
It's like John said, a direct result of extending the HTMLElement prototype which is done on the fly in IE as they do not expose the HTMLElement.prototype. But the problem will occur once the element is extended.
Though this is a cross browser inconsistency i believe it cannot be fixed without rewriting prototype to not extend any element at all.
Besides that didn't we pass the inline eventhandlers thingy a long time ago ?
John-David Dalton May 29th, 2008 @ 04:31 AM
- → Assigned user changed from “” to “Tobie Langel”
- → Milestone changed from “” to “Inline documentation”
- → State changed from “bug” to “doc”