Joomla 1.5 is for sure a great CMS: it features lot of extensions, a rather clean XHTML output and its framework API is really powerfull. Moreover it’s built with MVC logic in mind, enabling web designers to use template overrides in their themes.
Despite all these advanced features Joomla 1.5 is still stuck at JS framework Mootools 1.11. The latest version of this framework, 1.2.x, introduced many new features and a complete re-engineered code. Due to these changes, Joomla developers plan to upgrade Mootools in the 1.6 release, to be able to spread code changes to all plugins, modules and components. Until that release we’ll be stuck at outdated, unsupported and often undocumented code.
This is an attempt to add Mootools 1.2 support to current Joomla 1.5.9 release. Let’s start:
Update: A new version of files presented in this post is available here!
Requirements:
- Nearly full compatibility with Mootools 1.11 to avoid errors
- Upgrade of Mootools plugins where possibile
- None or minimal Joomla core hacks
- Implementation of Mootools in legacy (1.0.x) components
1. Smooth Mootools upgrade.
First of all let’s download the latest version of Mootools Core and Mootools More (right now 1.2.1):Mootools 1.2.1 Full (28.51 kB)
Unzip the archive and place the two files in media/system/js/
Then download this compatibility file, which will make old 1.11 scripts work rather smoothly with the new framework, and place it in the same folder as above (update 05/22/09 added getValue, Json and window.onDomReady compatibility, thanx Toopixel):
Mootools 1.11 to 1.2.1 Compatibility File (1.97 kB)2. Plugins Upgrade.
One of the more usefull plugin shipped with Mootools is Squeezebox, used for the modal windows, here is the 1.2 Compatible version, ready to be placed in the above mentioned folder media/system/js/:
3-4. Let’s try some PHP
Since i want to touch Joomla Core files as less as possible, im going to use some little tricks to be able to use Mootools 1.2 just in the Frontend and on-demand from the template’s main index.php file.
Joomla is based on several PHP libraries placed in the libraries/ folder; one of them is the Joomla API, but we can find ezSQL (a database lib), PHPMailer (a mailing system) and phpgacl (an access list system). To take advantage of Joomla’s built-in libraries loading system and, at the same time, prevent overwrites by future releases, i created a folder called my_libs in libraries/ containing a class file: my_behavior class for Joomla 1.5.9 (1.13 kB)
Basically the class provides a static function which recalls the head part of Joomla document object, looks for Mootools and replaces it with the 1.2 version we uploaded before.
If Mootools is not found, then it’s simply loaded, extending it’s presence in the head of legacy 1.0.x components.
You can call this newly added class in your Joomla theme index.php by placing these lines of code before the head template tag:
<?php
JLoader::import( 'my_libs.behavior' );
MY_Behavior::mootoolsFix();
?>
<jdoc:include type="head" />
If you need to switch back to v1.11 you can pass false as first argument to the function like this:
MY_Behavior::mootoolsFix(false);
Note this!
This is just a test, it should work on a basic Joomla installation, anyway feel free to report errors and issues to improve the code.
Untill now, I’ve experienced that Virtuemart uses it’s own logic to load libraries, so it’s excluded by default.
Optionally you can exclude specific components by passing an array with their option value as second argument:
MY_Behavior::mootoolsFix(true,array("com_sobi2","com_comprofiler"));
In SOBI2 an error will be issued on search form unless you set the registry option use_own_mootools to 0.
Tags: Joomla 1.5, Mootools
53 Responses to this post:
-
Nice work!
Fortunately, it seems to work great even if I use VirtueMart.
Now I can use my 1.2 scripts.
Thanks a lot! -
I am having a problem with this fix…
I get these two errors from firebug:
$(container).getElement is not a function
($(filter) || document).getElements is not a functionthey both say the problem was from line 39 in mootools-compat-111-121.js
I am using Joomla 1.5 and I am using mootools for noobslide please email me if you can help…ASAP
-
Hi,
Have you tried to get FancyUpload library (shipped with Joomla 1.5) work both with Joomla 1.5 and MooTools 1.2? -
I am geting an error also:
Window.onDomReady is not a function
[Break on this error] Window.onDomReady(function(){
validate.js (ligne 164)You can see a live site here:
http://m2bstudio.ch/en/infos-pratiques/pour-nous-contacterThat seems due to the JS of the com_contact component that is written with old mootools, but I can’t say why and what. Any help appreciated.
-
Hey Jack, can you answer me above ?
-
Thanks for the answer and the solution. That worked !
http://m2bstudio.ch/fr/infos-pratiques/pour-nous-contacter-
This solution is working under FF only. check the error on IE
-
can confirm that validate.js does not work in IE, is this something someone is working on?
-
Here is the IE errors
JScript object expected line 69 char 2 – mootools-compat-111-12.js
-
-
Here is a list of causes for this error
http://www.faqts.com/knowledge_base/view.phtml/aid/31494/fid/53
Someone smarter than I will have to see if any of these fixes will help.
-
Anybody found out about these IE errors, pointed out by Jared?
-
I’m no MooTools expert, not to mention version 1.1.
But when I replace “$A” on line 72 with “$$” the error disapears and the validation seems to work.
Is this as harmless as I think it is?-
Dwight,
No it does not fix the problem.
You can see it here on my sight. http://www.onsong.com/contact-on-song.html
It still does not work in IE.
What do you think of the solution that Planet crpyton gave? is it safe?
-
Sorry to nag but I really need this solved, would you mind looking at my site and giving me some feedback why I still get the error in IE?
-
-
-
-
-
[...] the release of version 1.2.2 of Mootools Core and More, i’m posting here an updated version of this workaround to which you could refer for details on how this code [...]
-
I got the following error on my website:
Line:15
Char:119
Code:0
Error:’null’ is null or not an object
URL:http://www.accesstopc.com/media/system/js/mootools-1.2.3-core.jsWhat was wrong with this error?
-
Thank you for greit decision, i realised it on 1 project, but I`ve got a problem on a server. It seems to me the reason is old PHP version (4.4.3-dev) – is it so how do you think?
-
Thank you very much !!
Great patch, that helps me a lot !
I just did what you explained and evry thing worked well.
Thank you for that
Malek -
Hi there,
Great fix for the front-end – has anyone managed to get MooTools 1.2 working with VirtueMart? If someone could post a hack up to get it working it’d be much appreciated. Either that or how to get a Slider and Scroller working to create CSS-styled scrollbars in MooTools 1.1 would be great!
-
Thanks for g8 fix!
Nice work, well done.
-
i’m using Teline III template from Joomlart and have a problem disabling the template’s mootools.
Here’s the component.php file (below) where there’s the ” tag, since it’s not on the index.php file
Pls assist
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="language; ?>” lang=”language; ?>” dir=”direction; ?>”>
<link rel="stylesheet" href="baseurl ?>/templates/ja_teline_iii/css/addons.css” type=”text/css” />
<link rel="stylesheet" href="baseurl ?>/templates/ja_teline_iii/css/template.css” type=”text/css” />
<link rel="stylesheet" href="baseurl ?>/templates/ja_teline_iii/css/print.css” type=”text/css” /> -
I’m running Joomla 1.5.14
-
Thanks and so great!
-
For some reason, tooltips with class .hasTip are transparent which does not look good.
-
Sorry, about that. the component.php tags did not copy. the thing is teline III is not like the other templates where the jodoc-head tag is in the index.php. on this template it’s on the component.php file.
here’s link to the site: http://yuth.co.za.
you’ll notice that the image javascript don’t work -
It works! Just need to define div.tip, div.tip-title and div.tip-text. What I did was copy the properties of div.tooltip to div.tip.
For some reason, I cannot reproduce that yellow arrow on top of the tooltip. I tried adding div.tip-top and copying the properties of div.h4 to it. However, there’s a very noticeable gap between the arrow and the tooltip upon display so I ended removing it altogether.
-
Oh, by the way! Congratulations and my deepest appreciation for your great work on bringing Mootools 1.2 to Joomla, and for your kind assistance to my inquiry. More power to you, bro!
-
Thanks mate! Worked really well!
-
[...] Jack Gebruik Mootools 1.2 in Joomla 1.5 Upgrade Mootools naar 1.2 in Joomla 1.5 VN:F [1.7.4_987]please wait…Rating: 0.0/10 (0 votes cast)VN:F [1.7.4_987]Rating: 0 (from 0 votes) [...]
-
can you do this without hack?
-
Is there no way to get the backend to work with 1.2 ? I want to use mochaui but that needs mootools 1.2
Thanks for all the hard work.
-
When I did this all I got was a bunch of stack overflow errors in IE. An then everything that worked in FFand Google Chrome didnt work any longer
-
If i place
before
It displays a blank page.
Have followed the tutorial carefully.

Wow! I’ve learned a lot! Nice discussion on Mootools, thanks a lot!