Hi all,
First of all I don't know if Prototype should work on IE8 Standard mode or
the compatibility mode only but I accidentally was using it on standard mode
without noticing and ran into a bug that I couldn't manage to make the
Selector API to get an Element created with anything like: new
Element("whatever-element", {"class":"whatever-class"}). I'm using 1.6.0.3.
First I thought that "down" and "select" where broken because I couldn't get
the elements, but then I found that writeAttribute is "broken" for the
"class" attribute. Somehow, only on IE8, when you translate "class" into
"className" by the Element._attributeTranslations, IE8 doesn't understands
it as the "class" attribute. Instead it creates the real "className"
attribute that it asked for and completely breaks the Selector API. I
designed a simple test case for it. If you use firebugLite or Debug Bar
you'll see the "className" attribute on the HTML Tab, but only on Standards
mode.
Here is the test case and the results are printed on the body:
<html>
<head>
<title>Test querySelectorAll for writeAttribute "class" on Standard
Mode</title>
<script type="text/javascript" src="
http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js
"></script>
<script type="text/javascript" src="<c:url value="/js/prototype.js"
/>"></script>
<script type="text/javascript">
function start() {
$(document.body).insert(
new Element("div", {"id":"idClassName1",
"class":"className1"}).insert(
new Element("div", {"id":"idSubClassName2",
"class":"subClassName2"})
)
);
$(document.body).insert(
new Element("div").update("querySelectorAll
\".className1\": " + $A(document.querySelectorAll(".className1")).length)
).insert(
new Element("div").update("querySelectorAll
\".subClassName2\": " + $A(document.querySelectorAll(".className1")).length)
).insert(
new Element("div").update("querySelectorAll
\"#idClassName1\": " +
$A(document.querySelectorAll("#idClassName1")).length)
).insert(
new Element("div").update("querySelectorAll
\"#idSubClassName2\": " +
$A(document.querySelectorAll("#idSubClassName2")).length)
);
}
</script>
</head>
<body onload="start();">
Test
</body>
</html>
The results will be:
Test
querySelectorAll ".className1": 0
querySelectorAll ".subClassName2": 0
querySelectorAll "#idClassName1": 1
querySelectorAll "#idSubClassName2": 1
The fix I found was to see if the element has the attribute "className" on
it and write the "class" attribute by force.
Here is the new writeAttribute to work with this problem:
writeAttribute: function(element, name, value) {
element = $(element);
var attributes = { }, t = Element._attributeTranslations.write;
if (typeof name == 'object') attributes = name;
else attributes[name] = Object.isUndefined(value) ? true : value;
for (var attr in attributes) {
name = t.names[attr] || attr;
value = attributes[attr];
if (t.values[attr]) name = t.values[attr](element, value);
if (value === false || value === null)
element.removeAttribute(name);
else if (value === true)
element.setAttribute(name, name);
else element.setAttribute(name, value);
if(attr == "class" && element["className"] == "") {
element.removeAttribute(name);
element.setAttribute(attr, value);
}
}
return element;
},
That's it, any comments are apreciated.
Rafael Raposo
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Prototype: Core" group.
To post to this group, send email to prototype-core@googlegroups.com
To unsubscribe from this group, send email to
prototype-core-unsubscr...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/prototype-core?hl=en
-~----------~----~----~----~------~----~------~--~---
