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:
-
John says:
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
-
dfediuk says:
Hi,
Have you tried to get FancyUpload library (shipped with Joomla 1.5) work both with Joomla 1.5 and MooTools 1.2?-
Hi,
right now this code is focused on the Frontend.
Working on the backend is much more risky ’cause there are lot of interaction with mootools 1.11.
More over the Fancy Upload problem with flash 10 is a problem within FancyUpload, which is going to be fixed by the Joomla team with release 1.6…Anyway im planning to try and find a workaround to be able to use FancyUpload again.
-
-
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.
-
Hi, in your case it seems that you’re not loading the compatilibty file properly, check the path where u’ve uploaded it:
http://m2bstudio.ch/media/system/js/mootools-compat-111-121.js
Anyway that part was missing, i’ve updated the compatibility file, adding even getValue and JSON compatibility:
http://www.dwightjack.com/diary/wp-content/plugins/download-monitor/download.php?id=9
Thanx for the feedback!
-
Thanks for the reply. Upgraded with your new version but still having the same error.
-
-
-
-
Hi,
sorry for the delay bu ti’ve been a bit busy
.
Anyway i’ve taken a look at the code. if you look at the end of the filevalidate.jsin/media/system/js/validate.jsyou’ll see this lines:
Window.onDomReady(function(){
document.formvalidator = new JFormValidator();
});
Here Window is uppercase and not lowercase as in the compat file (and in the Joomla 1.11 version).
I’ve tried to solve the problem in the compat file but seems that Window is a native class in Mootools 1.2.Best chances are to edit the
validation.jslines mentioned above by replacing them with a 1.11 and 1.2 compatible version:if (MooTools.version == '1.11') {
Window.onDomReady(function(){
document.formvalidator = new JFormValidator();
});
} else {
window.addEvent('domready', function() {
document.formvalidator = new JFormValidator();
});
}Let me know if it’ll work
-
-
Thanks for the answer and the solution. That worked !
http://m2bstudio.ch/fr/infos-pratiques/pour-nous-contacter-
-
jared says:
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.
-
Planet Crypton says:
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?
-
I think it’d be the reason. U should switch to PHP5 which is much better then 4. Beware that im having some troubles with latest PHP 5.3 on the admin interface, better choise is 5.2.x
-
-
MalekO says:
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!
-
Not really at the moment, but im planning to try and find a solution for Virtuemart
-
Alvin says:
Have you managed to fix VirtueMart with mootools 1.2.
Im very interested to this solution and i can pay to solve my issues. if you want please contact my by mail we can talk on skype for more. Thanks
-
Nope not yet. The problem with virtuemart is that it comes with a self-contained mootools framework and a lot of custom scripts. Rather than a component it’s like a CMS in the CMS… :S
-
-
-
-
armand says:
Thanks for g8 fix!
Nice work, well done.
-
sandzaonline says:
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
-
Rommel says:
For some reason, tooltips with class .hasTip are transparent which does not look good.
-
They have transparent background, no yellow color? Does it happens even without my hack?
-
Without your hack, the tooltips have yellow backgrounds. Previously, I followed your instructions here and modified my template, resulting to transparent tooltips. I also tried excluding com_content via behavior.mootoolsFix(true, array(“com_content”)), which resulted to yellow-coloured tooltips at the frontend, and transparent tooltips for component I am developing.
-
Ok, got it: the fact is that HTML classes of tooltips have changed from 1.11 to 1.2x. You may try opening general.css in templates/system/css and look for div.tooltip rules (3 of them), and change them accordingly to the new structure (see here)
Let me know if it works, bye!
-
-
-
-
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-
Hm, if u’ve already tried to put it in the component.php, before the head tag, you shloud try to put it on the very beginning of the index.php file.
When the CMS parses the template all the libraries are ready to go, so putting it just before head tag is just for clarity and convenience… you could put it every where you want before the head template tag.bye!
-
-
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.
-
Cool. I see the problem, but i think that the Implementations of tooltips has chaged too much to be able to completely fit the Joomla tip CSS…
bye!
-
-
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!
-
[...] 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) [...]
-
Alex says:
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.
-
Well it surely is by applying the same hack to the
index.phpof the khepry template inadministrator/templates/, but i believe it’d be better nopt to mess with backend. Moreover my opinion is that it’s always better to rely on what the backend offer without adding other libraries to keep the backend more uniform.
-
-
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
-
Nuno says:
If i place
before
It displays a blank page.
Have followed the tutorial carefully.
-
Never mind, sometimes im a bit too busy to reply ASAP, but i always thank you for pointing out problems
I’ve taken a look at the page, and it seems to me that the problem is that validation doesn’t work at all. Starting from that i’ve seen that the tag loading validate.js returns a 404 error check it here First of all you should try and see by FTP if the file is present or upload it (the one included with Joomla). Then let me know so i can check the error.bye!
Dwight Jack Workroom by Marco Solazzi is licensed under a Creative Commons License
Wow! I’ve learned a lot! Nice discussion on Mootools, thanks a lot!