In this post I'm going to show you how to use jQuery with Prototype and Script.aculo.us. Since both jQuery and Prototype share the same shorthand identifier (namely the dollar sign, $), we have to make sure that there will be no conflicts between these two libraries. To accomplish this task, we'll use the jQuery utility function noConflict() for that purpose. Also note that if you're using the Google's CDN system to load Script.aculo.us, the syntax ?load=effects and similar will not work, so you'll have to manually reference all the components of this library.
Here's how to load our libraries:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/prototype/1.7/prototype.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8/scriptaculous.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8/effects.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
Done that, the first thing to do is to call the jQuery's noConflict() function:
jQuery.noConflict();
Then we can create our custom namespace and embed the Prototype's notation there:
var myAPP = {
proto: $,
scale: function() {
new Effect.Scale('test', 105);
}
};
Note that we've also created a method that makes use of a Script.aculo.us effect. Then we can put it all together:
jQuery(document).ready(function() {
myAPP.proto('test').setStyle({backgroundColor: 'orange', width: '200px', height: '200px'});
window.setTimeout(function() {
myAPP.scale();
window.setTimeout(arguments.callee, 1000);
}, 1000);
});
As you can see below, everything works as expected.