SocialEngine – Making Mootools and jQuery play nice

I’ve been working on a few custom modules for a socialengine site and quickly realised that when I was including jQuery in my views all other javascript functionality within socialengine stopped working. This is because of a namespacing issue between mootools and jQuery which means that the $(‘#bla’).val(); type commands in mootools using the dollar sign were being overwritten by the jQuery namespace meaning that all the previous functions used in socialengine stop working.

Usually you would use the following (which breaks mootools);

<script src="<?php echo $baseURL; ?>js/jquery.js"></script>
<script type="text/javascript">
 
$(document).ready(function() {
  alert();
});
 
</script>

So how do you get around this issue? You need to use jQuery noConflict which defines a namespace to use and thus resolves the issue by using a custom variable rather than the dollar $.

You’ll need to change all $(). to $j().

<script src="<?php echo $baseURL; ?>js/jquery.js"></script>
<script type="text/javascript">
 
var $j = jQuery.noConflict();
 
$j(document).ready(function() {
  alert();
});
 
</script>

So every time you use jQuery you’ll have to use your custom variable just after the dollar sign

Enjoy