Using jQuery with Joomla!
Friday, May 8, 2009 3:49
Joomla ! (till Ver 1.5.10) by default supports mootools 1.11. The core is still not updated to use mootools 1.2x version.
Now back to the topic. jQuery and Mootools are known to produce conflicts when used together. jQuery is more reliable and robust than mootools (It is my personal view) but it is however not provided with core joomla installation. So how to use jQuery with Mootools without any conflicts.
To use jQuery with joomla,
- Download the latest jQuery release or any releast the best fit your requirements,
- Save it to an accessible folder (e.g. /media/system/js/)
- Now include the library from within your view. i.e. include the jquery library in layout file (normally default.php) of your view.
$document = &JFactory::getDocument();
$document->addScript(JPATH_SITE.’/media/system/js/jquery.js’ );
$document->addScriptDeclaration ( ‘jQuery.noConflict();’ );
You can use jQuery with jQuery.noConflict() method called right after you include the jQuery library as shown above.
This will allow you to use the jQuery without conflicts. But what if you want to replace all the mootools library with jQuery and don’t want to use mootools at all. But remember the Joomla Administrator section uses mootools heavily so you cannot eliminate mootools from administration panel. So how to use jQuery in frontend. Here is the trick.
Open a file named behavior.php. This is under libraries->joomla->html->html. Now find a method named mootools($debug = null). Create another function named jQuery(debug=null) and paste the code as below in the body of the function.
function jQuery($debug = null)
{
static $loaded;global $mainframe;
// Only load once
if ($loaded) {
return;
}// If no debugging value is set, use the configuration setting
if ($debug === null) {
$config = &JFactory::getConfig();
$debug = $config->getValue(‘config.debug’);
}$konkcheck = strpos (strtolower($_SERVER['HTTP_USER_AGENT']), “konqueror”);
if ($debug || $konkcheck) {
JHTML::script(‘jquery.js’, ‘media/system/js/’, false);
} else {
if($mainframe->isSite()) {JHTML::script(‘jquery.min.js’, ‘media/system/js/’, false);
}
else
{
JHTML::script(‘mootools.js’, ‘media/system/js/’, false);
}
}
$loaded = true;
return;
}
Now you can use jQuery in the frontend but the admin still uses the mootools. With this method you will not face any conflicts and use jQuery without mootools.
The jquery.min.js is the minified version of jQuery library whereas the jquery.js is uncompressed version. Remember to put these both files under media->system->js folder.
To use jQuery in your codes just call JHTML::_(‘behavior.jQuery’) to import jquery into your page. isn’t it cool to use jquery with joomla. I dreamt of it for long.
Send me comments and suggestions on this post. Happy reading
hoppster says:
May 14th, 2009 at 10:22 pm
Awesome! Thanks.
jQuery Developer says:
July 31st, 2009 at 5:56 am
I was always thinking of using library like jQuery and Mootools together. I hope your ideas will help me a lot . Thank for such a stuff .
Marcelo Dornelas says:
September 7th, 2009 at 5:10 am
Hi Guys!
Thanks for the great post. This helped me a lot.
Genner Puello says:
September 10th, 2009 at 7:48 pm
Is it not more easy implement a plugin as a library and then import the code on our development?
Ruudi33 says:
September 16th, 2009 at 2:29 am
Hi,
I’ve been trying to use jQuey with my Joomla website for too long.
I’m not a PHP coder, where to put these lines…
$document = &JFactory::getDocument();
$document->addScript(JPATH_SITE.’/media/system/js/jquery.js’ );
$document->addScriptDeclaration ( ‘jQuery.noConflict();’ );
Thanks.
Jimmy says:
September 22nd, 2009 at 7:45 pm
What and where is the view? Sorry if this is a dumb question!
Chrysanthos says:
October 2nd, 2009 at 2:21 pm
where should i put following code? Thanks
$document = &JFactory::getDocument();
$document->addScript(JPATH_SITE.’/media/system/js/jquery.js’ );
$document->addScriptDeclaration ( ‘jQuery.noConflict();’ );
Sanjeev says:
October 6th, 2009 at 9:41 am
@Jimmy: Joomla implements a view that outputs the actual HTML that is processed from a controller or view itself. In short, a view may be regarded as a template that is parsed by joomla to output html. These view are specific to a component you are using and generally found in views folder of the component. So you can find files related to views in the views folder of the component.
@Ruudi33 && @Chrysanthos : You need to put these codes in the layout file of a view where you want to implement jQuery.
zeejah says:
October 30th, 2009 at 7:19 am
hey, thanks for article. i am new to joomla can sm1 guide where to place this code
$document = &JFactory::getDocument();
$document->addScript(JPATH_SITE.’/media/system/js/jquery.js’ );
$document->addScriptDeclaration ( ‘jQuery.noConflict();’ );
do i need to change @ components\com_content\views\article …?
Roger says:
October 30th, 2009 at 11:59 am
Sorry not being an expert on that but i still didn’t get where to put these 3 lines:
$document = &JFactory::getDocument();
$document->addScript(JPATH_SITE.’/media/system/js/jquery.js’ );
$document->addScriptDeclaration ( ‘jQuery.noConflict();’ );
Could anyone tell me where is that view and which place inside the view should i put these lines?
Roger says:
October 30th, 2009 at 11:59 am
Sorry not being an expert on that but i still didn’t get where to put these 3 lines:
$document = &JFactory::getDocument();
$document->addScript(JPATH_SITE.’/media/system/js/jquery.js’ );
$document->addScriptDeclaration ( ‘jQuery.noConflict();’ );
Could anyone tell me where is that view and which place inside the view should i put these lines?
Thanks very much.
Shea says:
November 19th, 2009 at 3:43 pm
Fantastic thank you!
Roger,
each different view eg. article view, category view etc has its own template. For me I wanted to use Jquery on an article layout page, so I add the 3 lines to ‘myjoomlawebsite/components/com_content/views/article/tmpl/default.php
Hope that helps
Sam says:
November 24th, 2009 at 3:03 pm
Hi Sanjeev
Great article! Just one clarification – if I use the second method of using jQueryin all frontend pages, does this mean I can use it in all the views? And also do I not have to do the first method if I do the second?
Thanks very much!
Sanjeev says:
November 30th, 2009 at 10:42 pm
@Sam: Sorry for delayed response. Yes following the second method allows you to use jQuery in frontend, including all views. However you need to add, JHTML::_(’behavior.jQuery’) in your templates instead of JHTML::_(’behavior.mootools’).
Let me know if it works!
keogh says:
January 4th, 2010 at 1:53 pm
If I write this line
$document->addScriptDeclaration ( ‘jQuery.noConflict();’ );
I get the error -> $ is not a function
If I don’t write that line, no error is displayed and jQuery works fine, but I don’t if by omitting that line I could get errors i the future..
Thanks!
Sanjeev says:
January 4th, 2010 at 11:01 pm
@keogh: The code
$document = &JFactory::getDocument();
$document->addScript(JPATH_SITE.’/media/system/js/jquery.js’ );
$document->addScriptDeclaration ( ‘jQuery.noConflict();’ );
should be written as a php code in a view not as js code as
< ?php
$document = &JFactory::getDocument();
$document->addScript(JPATH_SITE.’/media/system/js/jquery.js’ );
$document->addScriptDeclaration ( ‘jQuery.noConflict();’ );
?>
I hope this will solve the problem. Let me know if it works
Neil says:
January 27th, 2010 at 4:52 pm
I was thinking or creating a Joomla site using Jquery and was told there would be conflicts but I knew someone out there such as your good self would have covered this already. Thank you very much for sharing this information – it’s brilliant.
Regards,
Neil.
Sanjeev says:
January 27th, 2010 at 10:56 pm
@Neil: I have created a plugin to use jquery with joomla. You can easily work with jQuery with the plugin without any joomla core hacks. The plugin is available at http://www.joomlaguru.com.np/freebies/plugins/12-plgosjquery.html
There are other modules and plugins also for you to use
Muhammad Yuqi says:
February 12th, 2010 at 12:21 am
i’ll try it.. hope this is work
Neil says:
February 14th, 2010 at 9:09 pm
Thank you very much for this. I’ll take a look at it now. Any help like this is much appreciated.
Best wishes,
Neil.