When we use MooTools and jQuery together in our page, common problem we found is that some functionality is not working properly for MooTools or jQuery
Sometimes it is hard to find out that the problem is in using both together
The solution is so simple. We have to say jQuery to not to conflict with other libraries.
You have to add jQuery.noConflict() to your jQuery code.
jQuery is namespaced so the $ function is free for MooTools to take hold of. The jQuery code passes jQuery to itself and then we call the argument $, thus jQuery is contained, so to speak.
Obviously including two libraries within the same page is resource-consuming but if it’s acceptable to the project and allows you to implement plugins from each library quickly, this may be a great option for you.
Sometimes it is hard to find out that the problem is in using both together
The solution is so simple. We have to say jQuery to not to conflict with other libraries.
You have to add jQuery.noConflict() to your jQuery code.
<p>jQuery sets this paragraph's color to red but MooTools sets the border color.</p>
<script type="text/javascript" src="jquery-1.3.js"></script>
<script type="text/javascript">
//no conflict jquery this makes possible to use both library together
jQuery.noConflict();
//jquery stuff
(function($) {
$('p').css('color','#ff0000');
})(jQuery);
</script>
<script type="text/javascript" src="moo1.2.js"></script>
<script type="text/javascript">
//moo stuff
window.addEvent('domready',function() {
$$('p').setStyle('border','1px solid #fc0');
});
</script>
<script type="text/javascript" src="jquery-1.3.js"></script>
<script type="text/javascript">
//no conflict jquery this makes possible to use both library together
jQuery.noConflict();
//jquery stuff
(function($) {
$('p').css('color','#ff0000');
})(jQuery);
</script>
<script type="text/javascript" src="moo1.2.js"></script>
<script type="text/javascript">
//moo stuff
window.addEvent('domready',function() {
$$('p').setStyle('border','1px solid #fc0');
});
</script>
jQuery is namespaced so the $ function is free for MooTools to take hold of. The jQuery code passes jQuery to itself and then we call the argument $, thus jQuery is contained, so to speak.
Obviously including two libraries within the same page is resource-consuming but if it’s acceptable to the project and allows you to implement plugins from each library quickly, this may be a great option for you.
