Are you enjoying the extensions? Did you like the support? Help others decide.

Leave a review

Include jQuery into a Joomla module

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>
 You can only download and purchase extensions on this site or through the Joomla administrator console.

If you downloaded or purchased Simplify Your Web extensions from another site (or received commercial software for free against a subscription), you are subject to malware infection, are not supporting the work of the developers and are not entitled to any assistance.

Don't get scammed into buying a license in exchange for services or goods not offered on this site. You will never receive those goods. Never share your account information.