Here at APT, our chosen Javascript library is YUI and we’re aggressively working on integrating more of our pages to use YUI 3 mainly because we love the syntax of the Node utility and accessing elements via CSS selectors. However, YUI doesn’t solve all of our problems. For instance, we want to have really great charts, but the YUI charting library isn’t functional enough for some of the stuff we want to do. So instead, we’ve chosen to go with the Flotr library, which is built on top of Prototype. This means on some pages we have both YUI and Prototype includes and just the past week we found out that they don’t always play nicely.
Consider the following page which includes both and then simple tries to style a number of elements on the page via an ID and class selector:
<!doctype html>
<html>
<head></head>
<body>
<ul id="list">
<li class="element">1</li>
<li class="element">2</li>
<li class="element">3</li>
<li class="element">4</li>
<li class="element">5</li>
<li class="element">6</li>
</ul>
<script src="http://yui.yahooapis.com/3.0.0/build/yui/yui-min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js" type="text/javascript"></script>
<script type="text/javascript">
YUI({ filter : "raw"}).use("node", "event", function(Y) {
Y.on("domready", function() {
Y.all("#list .element").setStyle("border", "solid 1px red");
});
})
</script>
</body>
</html>
This seems simple enough, but if you try this in any version of Internet Explorer, it won’t work. After digging through the YUI code and using the fantastic step-debugger that is part of the IE 8 Development Tools, I figured out that the problem was that Prototype adds the getElementsByClassName method to the document object if it doesn’t exist and YUI uses the existence of that method as a proxy for whether that browser implements getElementsByClassName for both the document object and HTMLElement instances. So in this case, that check doesn’t quite work.
For now I’ve added “&& document.documentElement.getElementsByClassName” to that check in our local copy of YUI and filed a ticket against this issue. Use this as an example that you need to careful when combining third party JavaScript libraries. No guarantees they’ll play nice together.
Social Links