JQuery & Mootools

For Joomla! 1.5 Coding related discussions, please use: http://groups.google.com/group/joomla-dev-general
aynz
Joomla! Apprentice
Joomla! Apprentice
Posts: 30
Joined: Fri Mar 02, 2007 8:47 pm

JQuery & Mootools

Post by aynz » Thu Apr 10, 2008 11:04 pm

Hi All

I am led to believe that there is a way to have mooltools and jquery work in harmony within Joomla by using jquery in non conflict mode.

Could someone give me some step by step instructions on how to achieve this as I looked on the jquery website and I could not see how the instructions translate within Joomla. What I am unsure of as well if it can be set as a global non conflict setting or if it needs to be implemented per module using jquery?

any help is appreciated

rmullinnix
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 108
Joined: Fri Nov 02, 2007 3:39 pm

Re: JQuery & Mootools

Post by rmullinnix » Fri Apr 11, 2008 11:59 am

I use JQuery with thickbox within Joomla. To simply get JQuery to work with mootools, do the following within the view (mvc -- default.php):

Code: Select all

JHTML::_('behavior.mootools');

$document = &JFactory::getDocument();
$document->addScript( JPATH_SITE.'/media/system/js/jquery.js' );
$document->addCustomTag( '<script type="text/javascript">jQuery.noConflict();</script>' );
FYI - I placed jquery.js in <joomla_root>/media/system/js/.

I had to do this within each of the components/modules and didn't look at doing it globablly.

To get thickbox to work with mootools, I had to change/replace all of the $() functions to JQuery() functions within thickbox.js, otherwise it invokes the mootools equivalent functions.

Code: Select all

$document = &JFactory::getDocument();
$document->addScript(JPATH_SITE.'/media/system/js/jquery.js' );
$document->addScript(JPATH_SITE.'/media/system/js/thickbox.js' );
$document->addCustomTag( '<script type="text/javascript">jQuery.noConflict();</script>' );
$document->addStyleSheet( JPATH_SITE.'/media/system/css/thickbox.css' );

aynz
Joomla! Apprentice
Joomla! Apprentice
Posts: 30
Joined: Fri Mar 02, 2007 8:47 pm

Re: JQuery & Mootools

Post by aynz » Fri Apr 11, 2008 12:54 pm

Thanks for the reply, I get the second bit of your post but I am unsure of what I edit when you reference (mvc -- default.php)

Also it looks like your solution is geared around editing mootools to work with JQuery, if possible I would like it to work the other way around as I have more items using mootools than I do using JQuery (not that I am adverse to a bit of work editing the other way round if necessary). ;)

rmullinnix
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 108
Joined: Fri Nov 02, 2007 3:39 pm

Re: JQuery & Mootools

Post by rmullinnix » Fri Apr 11, 2008 2:00 pm

mvc - default.php is the model-view-controller structure used in joomla 1.5. It's equivalent to old style file of <comp>.html.php. Add it to your file in which you are displaying your html form prior to the <form action="index.php" method="post" ...> in your code.

No, this solution is geared to primarily use mootools as the solution and use JQuery as secondary. Notice in the 1st code post that behavior.mootols comes before the jquery items and JQuery.noConflict() is called so it doesn't interfere with mootools.

Ignore the 2nd part if you are not using thickbox. It is the only file I had to edit to get it that particular item to work. There is no editing to mootools or jquery.

User avatar
phil_
Joomla! Apprentice
Joomla! Apprentice
Posts: 38
Joined: Sun Feb 10, 2008 1:18 pm
Location: Cincinnati, OH
Contact:

Re: JQuery & Mootools

Post by phil_ » Sun Apr 13, 2008 4:21 am

This has what you need to use jQuery with other libraries. The last option is very good, since you don't have to modify your jQuery code, you just wrap it in a protected function..

http://docs.jquery.com/Using_jQuery_wit ... _Libraries

Here's something fun to get jQuery support..

1. Upload jQuery to /media/system/js/jquery.js
2. Edit /libraries/joomla/html/html/behavior.php
3. At line 61, after mootools function is done, add this..

function jquery() {
JHTML::script('jquery.js','media/system/js/',false);
}

Now you can load jQuery with JHTML::_('behavior.jquery'). I know, it's easier to just load it directly.. but this way is perhaps more 'forward compatible'?

;)
Phil
Phil Snell - Web Designer / Developer
http://snellcode.com
[email protected]

babberoo
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 139
Joined: Wed Jan 23, 2008 5:35 pm

Re: JQuery & Mootools

Post by babberoo » Fri May 30, 2008 12:17 pm

I have a query regarding this method. I'm currently using Virtuemart which uses the Thickbox method. I'm also using JQuery to deploy a dropshadow effect on certain elements. I've successfully implemented a fix on some pages where Mootools is loaded using:

Code: Select all

<jdoc:include type="head" />

	<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/bedsareuzzz/javascript/jquery/jquery.js"></script>
	<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/bedsareuzzz/javascript/jquery/jquery.dimensions.js"></script>
	<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/bedsareuzzz/javascript/jquery/jquery.dropshadow.js"></script>
	<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/bedsareuzzz/javascript/jquery/renderdropshadow.js"></script>

My renderdropshadow script is as follows:

Code: Select all

//We use this to define our dropshadows and render them
window.onload = function()
	{
		//As we load Mootools we need to handle any namespace problems
		jQuery.noConflict();
		//Setup some standard dimensions for our shadows
		var left_dim = 10;
		var top_dim  = 10;
		var blur_level = 5;
		var opacity_level = 0.4;

		jQuery("#content.home").dropShadow({left: left_dim, top: top_dim, blur: blur_level, opacity: opacity_level});
		jQuery(".staticimage").dropShadow({left: 0, top: top_dim, blur: blur_level, opacity: opacity_level});
		jQuery(".category").dropShadow({left: left_dim, top: top_dim, blur: blur_level, opacity: opacity_level});
		jQuery(".browseProductContainer").dropShadow({left: left_dim, top: top_dim, blur: blur_level, opacity: opacity_level});
		jQuery(".productimages").dropShadow({left: left_dim, top: top_dim, blur: blur_level, opacity: opacity_level});
	}

My problem is that when using Virtuemart and Thickbox, the Mootools code for Thickbox is loaded before I can execute jquery.noconflict() which results in the webpage incorrectly targeting the $ element. Is there any way I can reorder my code execution to achieve this?

babberoo
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 139
Joined: Wed Jan 23, 2008 5:35 pm

Re: JQuery & Mootools

Post by babberoo » Fri May 30, 2008 12:25 pm

Sometimes just looking at something from fresh point of view (i.e as a forum post) can show you the way:

I needed to remove my jquery.noconflict() from my renderdropshadow script and put in outside of the window.onload function.

conan1212
Joomla! Apprentice
Joomla! Apprentice
Posts: 8
Joined: Wed Sep 17, 2008 3:30 pm
Location: Vietnam
Contact:

Re: JQuery & Mootools

Post by conan1212 » Mon Sep 29, 2008 2:34 am

A bit notice

Code: Select all

JPATH_SITE
is path of dir on server is not url of file. :D
[CMS BASE ON Zend Frameowrk]http://zfvn.co.cc
[Conan1212 Blog:]http://phplaw.[URL banned].com

Conan1212 is me a ditector in the world of php.

User avatar
kai920
Joomla! Guru
Joomla! Guru
Posts: 542
Joined: Sun Sep 04, 2005 3:59 pm
Location: Hong Kong

Re: JQuery & Mootools

Post by kai920 » Sun Dec 14, 2008 3:44 pm

phil_ wrote:Here's something fun to get jQuery support..

1. Upload jQuery to /media/system/js/jquery.js
2. Edit /libraries/joomla/html/html/behavior.php
3. At line 61, after mootools function is done, add this..

function jquery() {
JHTML::script('jquery.js','media/system/js/',false);
}

Now you can load jQuery with JHTML::_('behavior.jquery'). I know, it's easier to just load it directly.. but this way is perhaps more 'forward compatible'?
What's the difference between using JHTML::_('behavior.jquery') and loading it directly from the Joomla template's index.php? (besides the fact that jquery is loaded across the site with the latter method)

I used the JHTML method in one of EventList's view templates (via template override). I see jquery.js in the <head> section, before mootools.js, but the simple jQuery code I've placed immediately after the JHTML behavior statement does not seem to execute. If I load jQuery directly from the J template's index.php, the code works. I noticed by loading jquery.js this way, it comes after mootools.js.

User avatar
phil_
Joomla! Apprentice
Joomla! Apprentice
Posts: 38
Joined: Sun Feb 10, 2008 1:18 pm
Location: Cincinnati, OH
Contact:

Re: JQuery & Mootools

Post by phil_ » Sun Dec 14, 2008 4:52 pm

kai920 wrote:
phil_ wrote:Here's something fun to get jQuery support..

1. Upload jQuery to /media/system/js/jquery.js
2. Edit /libraries/joomla/html/html/behavior.php
3. At line 61, after mootools function is done, add this..

function jquery() {
JHTML::script('jquery.js','media/system/js/',false);
}

Now you can load jQuery with JHTML::_('behavior.jquery'). I know, it's easier to just load it directly.. but this way is perhaps more 'forward compatible'?
What's the difference between using JHTML::_('behavior.jquery') and loading it directly from the Joomla template's index.php? (besides the fact that jquery is loaded across the site with the latter method)

I used the JHTML method in one of EventList's view templates (via template override). I see jquery.js in the <head> section, before mootools.js, but the simple jQuery code I've placed immediately after the JHTML behavior statement does not seem to execute. If I load jQuery directly from the J template's index.php, the code works. I noticed by loading jquery.js this way, it comes after mootools.js.
I'd like to clear something up here. It has since come to to my attention the method I had posted using behavior.jquery is a terrible idea. Please do not use this method. You should never 'hack the core' and this is exactly what this does. Say this library file was updated with a patch later? This code would either be blown away, or you would need to carefully tiptoe around it. So please, do not use this method, and sorry for the confusion.

Using it in a template override is a bit less terrible, but not much. To use jquery with other libraries, you need to make sure it loads last. AFAIK, this method will not give you that control. In any case, its much easier and straight forward to just directly include it.

All this aside, if you find a good way to make this work, that would be great, and I would love to hear about that.
Phil Snell - Web Designer / Developer
http://snellcode.com
[email protected]

User avatar
Esteban Soler
Joomla! Explorer
Joomla! Explorer
Posts: 339
Joined: Tue May 29, 2007 6:31 pm
Location: Mar del Plata (Argentina)
Contact:

Re: JQuery & Mootools

Post by Esteban Soler » Mon Dec 15, 2008 1:28 pm

i am having the same kind of issues , but a little more complex since i am using many components that try to load jquery on their own
i am not sure about what will i do, but i am thinking about writing a system plugin which you can call on every component and tell the plugin what scripts you need to load, then the plugin adds em to the end of the document

any better/simpler idea? i would really appreciate the help

Cheers
Esteban

User avatar
kai920
Joomla! Guru
Joomla! Guru
Posts: 542
Joined: Sun Sep 04, 2005 3:59 pm
Location: Hong Kong

Re: JQuery & Mootools

Post by kai920 » Tue Dec 16, 2008 5:01 am

Thanks for the reply Phil. I too thought it was a bit intrusive to hack core code, but I don't mind as I know my way around J a bit. I have been running into problems with jQuery conflicting with Mootools in SOBI2's search results... so have put off this particular experiment for now. Still keen on learning more jQuery though...

User avatar
revive1
Joomla! Intern
Joomla! Intern
Posts: 87
Joined: Sat Apr 12, 2008 1:41 am

Re: JQuery & Mootools

Post by revive1 » Fri Jan 16, 2009 10:01 am

I strongly suggest looking at the jquery site (http://docs.jquery.com/Using_jQuery_wit ... _Libraries) BEFORE changing any code.. especially core files..they have some easy fixes there.. like phil_ said, the last one is probably the best option..

We posted how it solved an issue for us with a jquery template and mootools module RokSlideshow here: http://www.rocketwerx.com/forum/viewtop ... 032#p12032
My favorite web design/dev tools:
Rackspace Cloud Files + Cloud9 http://cloud9manager.com
24" iMac, MAMP Pro, Logitech MX Revolution, Coda, TextMate, Transmit, Snippley and Adobe CS4
For small ecommerce: http://nanao-cart.com

User avatar
phil_
Joomla! Apprentice
Joomla! Apprentice
Posts: 38
Joined: Sun Feb 10, 2008 1:18 pm
Location: Cincinnati, OH
Contact:

Re: JQuery & Mootools

Post by phil_ » Fri Jan 16, 2009 3:58 pm

revive1 wrote:I strongly suggest looking at the jquery site (http://docs.jquery.com/Using_jQuery_wit ... _Libraries) BEFORE changing any code.. especially core files..they have some easy fixes there.. like phil_ said, the last one is probably the best option..

We posted how it solved an issue for us with a jquery template and mootools module RokSlideshow here: http://www.rocketwerx.com/forum/viewtop ... 032#p12032
I've been thinking about this again lately. I think one good way would be to make a system plugin that will take all the js files, shuffle them into the desired order, addind jquery to the end. It could also then output the noConflict() method, like this... <script>jQuery.noConflict();</scipt>

What would be left is just to wrap any jquery code into a protected block, like...

Code: Select all

jQuery(document).ready(function($){
	
    $('body').css('color','red'):

});
It's also possible to have the plugin offer a special method to add jquery code, so that it would gather up all the code, and then place the protection around it all. Perhaps the plugin could have some parameter field to add jquery code directly in the plugin. I like the idea of the plugin because its non intrusive, and is not specific to any template.

If I manage to get a good plugin like this working, I will share it. Unless somebody beats me to it, in which case, please provide the link?? :P
Phil Snell - Web Designer / Developer
http://snellcode.com
[email protected]

User avatar
revive1
Joomla! Intern
Joomla! Intern
Posts: 87
Joined: Sat Apr 12, 2008 1:41 am

Re: JQuery & Mootools

Post by revive1 » Fri Jan 16, 2009 4:08 pm

Great idea phil_, keep in touch.. would like to see what you come up with..
My favorite web design/dev tools:
Rackspace Cloud Files + Cloud9 http://cloud9manager.com
24" iMac, MAMP Pro, Logitech MX Revolution, Coda, TextMate, Transmit, Snippley and Adobe CS4
For small ecommerce: http://nanao-cart.com

User avatar
Esteban Soler
Joomla! Explorer
Joomla! Explorer
Posts: 339
Joined: Tue May 29, 2007 6:31 pm
Location: Mar del Plata (Argentina)
Contact:

Re: JQuery & Mootools

Post by Esteban Soler » Fri Jan 16, 2009 5:07 pm

well i actulally wrote that plugin i suggested, works good at least for what i need to do.
if someone needs it or want to contribute feel free to do it

here is an example of how i use it
the array recived as parameter is not an elegant solution, but works good enought

the first two ones load a js script
the last one loads some javascript code

i diferentiate between this two kinds of action 'cos the plugin checks that there we are not loading the same js file two times

Code: Select all

$mainframe->triggerEvent('onJsLoad', array($this->baseurl . '/components/com_comprofiler/js/jquery-1.2.6/jquery-1.2.6.pack.js', null));
$mainframe->triggerEvent('onJsLoad', array($this->baseurl . '/components/com_comprofiler/js/jquery-1.2.6/jquery.ui-all.pack.js', null));
$mainframe->triggerEvent('onJsLoad', array(null, '
<link rel="stylesheet" href="'.$template_url.'css/themes/flora/flora.all.css" type="text/css" />
<script type="text/javascript" >
	jQuery.noConflict();
	jQuery(document).ready(function(){
		jQuery("div.tabbed > ul.tab").tabs({ fx: { opacity: "toggle" } }).tabs("rotate", 3000);
	}); 
</script>'));

Cheers
Esteban
You do not have the required permissions to view the files attached to this post.

michelf
Joomla! Fledgling
Joomla! Fledgling
Posts: 2
Joined: Mon Jan 19, 2009 4:43 am

Re: JQuery & Mootools

Post by michelf » Mon Jan 19, 2009 5:00 am

Good evening,

I just tried your plugin. It did fix my problem. Thanks!

Merci bien!

Michel

michelf
Joomla! Fledgling
Joomla! Fledgling
Posts: 2
Joined: Mon Jan 19, 2009 4:43 am

Re: JQuery & Mootools

Post by michelf » Mon Jan 19, 2009 5:02 am

Good evening,

I just tried your plugin. It fixed my problem. Thanks!

Merci bien!

Michel

FR6
Joomla! Fledgling
Joomla! Fledgling
Posts: 1
Joined: Wed Aug 06, 2008 1:19 pm

Re: JQuery & Mootools

Post by FR6 » Thu Jan 22, 2009 8:44 pm

You can find a great PDF (it is a free chapter of a book) explaining how to use jQuery and Mootools at same time without conflict at

http://www.packtpub.com/files/learning- ... ffects.pdf

via

http://www.designvsdevelop.com/using-mo ... in-joomla/

It works very well for me.

andr386
Joomla! Apprentice
Joomla! Apprentice
Posts: 5
Joined: Mon Dec 15, 2008 12:01 pm

Disable Mootools on the client side (keep it only for back-e

Post by andr386 » Wed Feb 11, 2009 4:47 pm

If you don't user Motools yourself, thus only need it on the back-end.

You might disable it completely on the front-end (client side).

Anyway, that's how I did it :

Code: Select all

126                 // When on the back-end -->  include joomla javascripts
127                //
128                 if (strstr($_SERVER["REQUEST_URI"],"administrator"))
129                 {
130                   // Generate script file links
131                   foreach ($document->_scripts as $strSrc => $strType) {
132                        $strHtml .= $tab.'<script type="'.$strType.'" src="'.$strSrc.'"></script>'.$lnEnd;
133                   }
134                 }
135
"libraries/joomla/document/html/renderer/head.php" 
In this case, you can only use Jquery on your website, but $() works and you don't need to modify
your plugins :D

somanweb
Joomla! Apprentice
Joomla! Apprentice
Posts: 48
Joined: Tue Oct 23, 2007 6:49 am
Contact:

Re: JQuery & Mootools

Post by somanweb » Tue Aug 04, 2009 12:11 pm

phil_ wrote:This has what you need to use jQuery with other libraries. The last option is very good, since you don't have to modify your jQuery code, you just wrap it in a protected function..

http://docs.jquery.com/Using_jQuery_wit ... _Libraries

Here's something fun to get jQuery support..

1. Upload jQuery to /media/system/js/jquery.js
2. Edit /libraries/joomla/html/html/behavior.php
3. At line 61, after mootools function is done, add this..

function jquery() {
JHTML::script('jquery.js','media/system/js/',false);
}

Now you can load jQuery with JHTML::_('behavior.jquery'). I know, it's easier to just load it directly.. but this way is perhaps more 'forward compatible'?

;)
Phil
If you do like the below method

2. Edit /libraries/joomla/html/html/behavior.php
3. At line 61, after mootools function is done, add this..

function jquery() {
JHTML::script('jquery.js','media/system/js/',false);
}

It will be a problem, when upgrading the Joomla versions rite ?

Somanweb
http://www.joomla-web-developer.com Joomla Web Developer, Joomla Web Development
http://www.joomla-web-designer.com Joomla Web Designer, Joomla Web Design

User avatar
phil_
Joomla! Apprentice
Joomla! Apprentice
Posts: 38
Joined: Sun Feb 10, 2008 1:18 pm
Location: Cincinnati, OH
Contact:

Re: JQuery & Mootools

Post by phil_ » Tue Aug 04, 2009 4:52 pm

somanweb wrote: It will be a problem, when upgrading the Joomla versions rite ?

Somanweb
yes, it is a bad idea to directly change any core files that come with Joomla!, because it makes upgrading difficult. Instead of changing file, use a method to extend or override. For example, a system plugin would be able to give you access to jQuery on all pages, in a way that is compatible with mootools.
Phil Snell - Web Designer / Developer
http://snellcode.com
[email protected]

User avatar
Esteban Soler
Joomla! Explorer
Joomla! Explorer
Posts: 339
Joined: Tue May 29, 2007 6:31 pm
Location: Mar del Plata (Argentina)
Contact:

Re: JQuery & Mootools

Post by Esteban Soler » Tue Aug 04, 2009 5:11 pm

like the one i posted some time ago on this same thread

i have been using it for a while and works good for me at least. sometimes you need to change some other components a little (or a lot) but works so far is pretty straight forward

Cheers
Esteban

Zyloch
Joomla! Apprentice
Joomla! Apprentice
Posts: 22
Joined: Thu Jul 23, 2009 6:32 pm

Re: JQuery & Mootools

Post by Zyloch » Wed Aug 05, 2009 8:01 am

All decent jQuery plugins I've seen have been careful to use jQuery() instead of $(), or assign $ to jQuery in local scope. In doing so, it is no longer an issue that jQuery.noConflict() is called last in the <head> section. Is this not the case with Thickbox?

Also, when loading jQuery with JHTML::script('jquery.js', $path, false), I use the following code:

$doc =& JFactory::getDocument();
$script = 'if($===jQuery){jQuery.noConflict();}';
$doc->addScriptDeclaration($script);

This ensures that even if MooTools is loaded after jQuery and before the call to jQuery.noConflict(), that nothing bad happens.

User avatar
Esteban Soler
Joomla! Explorer
Joomla! Explorer
Posts: 339
Joined: Tue May 29, 2007 6:31 pm
Location: Mar del Plata (Argentina)
Contact:

Re: JQuery & Mootools

Post by Esteban Soler » Wed Aug 05, 2009 12:27 pm

yes, but the main issue i've seen is that many of the components and modules that use jquery don't have a way to check it has been loaded before. that's why i made that plugin

Esteban

spletsplet
Joomla! Fledgling
Joomla! Fledgling
Posts: 1
Joined: Sun Aug 16, 2009 3:31 pm

Re: JQuery & Mootools

Post by spletsplet » Sun Aug 16, 2009 3:35 pm

hello. i can't download the file

User avatar
ooffick
Joomla! Master
Joomla! Master
Posts: 11614
Joined: Thu Jul 17, 2008 3:10 pm
Location: Ireland
Contact:

Re: JQuery & Mootools

Post by ooffick » Sun Aug 16, 2009 5:06 pm

The file seems to be not available at the moment. Please check back later.

Olaf
Olaf Offick - Global Moderator
learnskills.org

User avatar
Esteban Soler
Joomla! Explorer
Joomla! Explorer
Posts: 339
Joined: Tue May 29, 2007 6:31 pm
Location: Mar del Plata (Argentina)
Contact:

Re: JQuery & Mootools

Post by Esteban Soler » Sun Aug 23, 2009 9:35 pm

Hi, i just added that plugin to my website, feel free to download it from there

http://informalthinkers.com/joomla/jsloader/

cheers
Esteban

Jimerz
Joomla! Apprentice
Joomla! Apprentice
Posts: 25
Joined: Sun Aug 02, 2009 2:13 pm
Location: Washburn, IL
Contact:

Re: JQuery & Mootools

Post by Jimerz » Mon Nov 02, 2009 11:50 pm

I haven't tried this but: SC jQuery. Again I haven't tried it but the description looks good!!

jgodek
Joomla! Apprentice
Joomla! Apprentice
Posts: 35
Joined: Thu Jan 10, 2008 4:42 pm

Re: JQuery & Mootools

Post by jgodek » Wed Jan 27, 2010 10:26 am

Plugin method
Is there any documentation on how to use the plugin? where do I put the files that come in the ZIP file?

Thanks


Locked

Return to “Joomla! 1.5 Coding”