KAT CODE

The goals of this tutorial is to show how to create a simple plugin and to provide a clean method that will include Jquery on all your pages.

The great thing about plugins is that you can make it apply to all your templates including the backend admin and launch it during different stages of the page loading process. You can also easily activate or deactivate it in one central place.

In this example this plugin will simply include the jquery library in the head section of the page for all the templates. It will also work nicely with MooTools.

The Plugin

It will be a system type plugin becauase it will be executing on the onAfterInitialize event. The plugin will execute after the main core libraries and other javascript files are loaded.

Create a temporary directory to hold the plugin files. The reason it is temporary is because it will only be used to upload the plugin files during the install from the Admin backend.

Create a file named jquery.php into this temporary directory. Copy the following code snippet into the file.

<?php

defined( '_JEXEC' ) or die( 'Restricted access' );

jimport( 'joomla.plugin.plugin' );

class plgSystemJquery extends JPlugin
{

	function plgSystemJquery( &$subject, $config )
	{
		parent::__construct( $subject, $config );

	}

	function onAfterInitialise()
	{

		//Need to use JURI::root() for full url path because relative path will not work on backend admin pages
		$script  = '<script type="text/javascript" src="'.JURI::root().'script/js/jquery-1.4.2.min.js"></script>\n';
        $script .= '<script type="text/javascript">\$j = jQuery.noConflict(); </script>';

	      $doc =& JFactory::getDocument();

		  //Will only include jquery for html content pages. Otherwise will try to include for
		  //raw and other content types
	      if($doc->getType() == 'html') {
	      	$doc->addCustomTag($script);
	      }
	}
}

You will need to change this line to point to where you placed your jquery library file. In my projects I put all my template javascript files in a folder I create under the Joomla root named /script.

$script  = "<script type='text/javascript' src='script/js/jquery-1.4.2.min.js'></script>\n";

This line will make jquery work with mootools. Since MooTools also uses $ as its handle, Jquery cannot use this also. You can reassign the jquery handle
to whatever you want using the noConflict() method. In this example $j will replace $ for Jquery.

$script .= "<script type='text/javascript'>\$j = jQuery.noConflict(); </script>";

Plugin Meta Data

You will need to create a jquery.xml file that defines what the plugin is and provides description for the backend admin page and install process. Create this jquery.xml file
in your temporary directory.

<?xml version="1.0" encoding="utf-8"?>
<install version="1.5" type="plugin" group="system">
	<name>System - Jquery Include</name>
	<author>Your Name</author>
	<creationDate>Sep 2010</creationDate>
	<version>1.0</version>
	<description>This will load the jquery library</description>
	<files>
		<filename plugin="jquery">jquery.php</filename>
	</files>
</install>

Install the Plugin

Login to the Admin backend and go to Extensions -> Install/Uninstall option

In the install from directory section enter the path to the temporary directory where you placed your plugin files and click Install.

You should get a message the plugin was installed successfully.

Now while in admin go to Extensions -> Plugin Manager option. Find the plugin named ‘System – Jquery Include’. Click on the red x icon to activate it.

Reload any of your Joomla pages and view the source. You should now see that jquery has been included in the head section after all the other javascript file includes.

You can now use the jquery library anywhere on any page using the $j handle.