Phil Taylor's Blog

The Joomla Core Team have Just announced that they intend to add the famous mootools javascript library to Joomla 1.5. This hasnow been blogged about by Amy Stephen, and the comments on the posts in her blog have prompted me to write this.

Mootools and jQuery are two very popular javascript frameworks that can be used to add “bling” to a website. Both of them have ajax modules and a whole host of effects modules.

It is our opinion the jQuery is a lot better suited to a lot of tasks, and a lot nicer to use due to its chainable methods and simple syntax. However jQuery (1.0.3) is already being used on the Joomla Extensions Website (part of Mosets Tree, when logged in) and by many other 3rd party Joomla developers. Mootools has now been chosed by the core team so lets look at how we can make them work together nicely.

The jQuery library, and virtually all of its plugins are constrained within the jQuery namespace. As a general rule, “global” objects are stored inside the jQuery namespace as well, so you shouldn’t get a clash between jQuery and any other library (like Prototype, MooTools, or YUI).

That said, there is one caveat: By default, jQuery uses “$” as a shortcut for “jQuery” and so does MooTools!!!

However, you can override that default by calling jQuery.noConflict() at any point after jQuery and the other library have both loaded. For example (modified from original):

    	<script src="prototype.js">

 <script src="moo.js">

 <script src="jquery.js">

    <script>

      jQuery.noConflict();

// Use jQuery via jQuery(...)

      // Use Prototype/Mootools with $(...), etc.

    </script>

This will revert $ back to its original library. You’ll still be able to use “jQuery” in the rest of your application.

Read the full instructions for this at http://docs.jquery.com/

We know this works as jQuery, xAJAX and MooTools are all included in our soon-to-be-announced “Thing” (shhh….. keep guessing! Clue: It works in Joomla 1.0.12 and Joomla 1.5 WITHOUT modifications…)

COMPARE THIS and be amazed!

We love jQuery – we really do – and now you can see why – go to this page and compare the code it takes to acheive a simple task:

Zebra Table Showdown:

jQuery – 1 line of code !!!

mootools – 6 lines of code !!!

Tags: Joomla Components Posted in Uncategorized