This article is outdated. Please check this updated discussion in order to find out the best way to include jQuery into your own extensions.
When including jQuery into one extension (a module for instance), it is important to make sure you can disable it in order to take advantage of the already included template library and therefore avoid multiple occurrences of it. It will prevent conflicts and make the website load faster.
See Making the cut with jQuery and MooTools in Joomla: The multiple jQuery libraries loading problem.
In this article, we will present how to integrate specific code to load jQuery and include a specific parameter that will allow the component to switch it on and off.
Step 1 - Add the jQuery library to the module
Go to the jQuery website in order to download the latest version of jQuery. Add the library file to the root of the module project. This will ensure your module will still work, even if no other version of jQuery is available.
Step 2 - Add the library file to mod_my_module.xml
Go to the files portion of the xml file and enter, for instance:
<filename>jquery-1.6.2.min.js</filename>Step 3 - Add the parameter to enable jQuery or not
In the advanced fieldset section, enter the following code:
<field name="load_jquery" type="radio" default="1" label="MOD_MY_MODULE_FIELD_LOAD_JQUERY_LABEL" description="MOD_MY_MODULE_FIELD_LOAD_JQUERY_DESC">
<option value="1">Yes</option>
<option value="0">No</option>
</field>Step 4 - Add the function load_jquery to helper.php
/* Load jQuery */
public function load_jquery(&$params)
{
$doc = &JFactory::getDocument();
$app = &JFactory::getApplication();
static $jqLoaded;
if ($jqLoaded) {
return;
}
if ($params->get('load_jquery') && !$app->get('jQuery')){
$file = JURI::root(true).'/modules/mod_my_module/jquery-1.6.2.min.js';
$app->set('jQuery',1);
$doc->addScript($file);
$doc->addScriptDeclaration("jQuery.noConflict();");
$jqLoaded = TRUE;
}
}Note: this code will add the correct scripts in the <head> section of the template, AFTER the Mootools calls.
The specific jQuery code for the module could be placed in the helper, at the end of the load_jquery function. But in order to take advantage of the library being loaded with the template, it is not possible. The jQuery library of the template would be loaded AFTER this code, therefore ignoring it.
Step 5 - Call load_jquery from mod_my_module.php
modMyModuleHelper::load_jquery($params);Step 6 - Add jQuery code to tmpl/default.php
<div class="my_module_<?php echo $params->get('moduleclass_sfx'); ?>">
<script type="text/javascript">
jQuery(document).ready(function(){
// code here
});
</script>
</div>