Prototype.js on IE smashed by id="tblStudents"
- April 7, 2008 5:29 PM
- Browsers, Javascript
- Comments (2)
Ok, so here is the weirdest IE bug I've ever seen.... the weirdest by far. I was trying to get some sortable table code up and running and after I got it going in FireFox, IE 7 was throwing fits. I narrowed it down to a specific instantiation of the table that I had on my page, and then started hacking things out. I pulled out all my custom DisplayTable code. I remove all of my custom code completely. I removed Scriptaculous.
Turns out IE has a weird behavior where it adds a global scope variable with the same name as any id, so that you can just say tblStudents.innerHTML = 'whatever' without needing to fetch the element. My lack of a var keyword before my variable ment it was trying to reference that variable and causing a conflict.
I reduced my test page to:
<html>
<head>
<title>Proto-fail</title>
<InvalidTag type="text/javascript" src="prototype-1.6.0.2.js"></script>
<InvalidTag>
var DisplayTable = Class.create({
initialize: function () {
Prototype.emptyFunction();
}
});
</script>
</head>
<body>
<div id="tblStudents">tblStudents will kill your app!</div>
<InvalidTag type="text/javascript">
tblStudents = new DisplayTable();
</script>
</body>
</html>
Still throwing an error in IE. Click here for an example.
Ok, so here is the rub... see that div in the middle? If you remove it, no error. If you rename the div, no error. Change the name of the div and you get no error. This code will only error if the div was named 'tblStudents'. If you change the div ID to "tbstudents", "tblStudent", or even "tblStudentx" and I get no error.
And the nifty part... cut and paste the div to be below the object instantiation and you get no errors...
<html>
<head>
<title>Proto-fail</title>
<InvalidTag type="text/javascript" src="prototype-1.6.0.2.js"></script>
<InvalidTag>
var DisplayTable = Class.create({
initialize: function () {
Prototype.emptyFunction();
}
});
</script>
</head>
<body>
<InvalidTag type="text/javascript">
tblStudents = new DisplayTable();
</script>
<div id="tblStudents">tblStudents wont kill your app!</div>
</body>
</html>
I'm baffled.
Comments
It has nothing to do with the name "tblStudents". You could get the same behavior with any name if the id and variable name are the same.
If you change the second script to read "var tblStudents = new DisplayTable();" the problem also goes away. As far as I can tell, this is because HTML elements are available by their id in the script context (try "alert(tblStudents.id);" in your second script block). I'm guessing the Fx script engine automagically assumes your are trying to create a new var, whereas IE is trying to assign to the HTML element node if you omit the var declaration.