Using Jquery with MooTools in Joomla Using a Plugin

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.

Leave a comment

9 Comments.

  1. hi,thanks ur text.but can you tell me more detail about how to use $j in joomla. :grin:

  2. Excellent goods from you, man. I’ve bear in mind your stuff prior to and you are simply too
    excellent. I actually like what you have bought here, certainly like
    what you’re saying and the way by which you assert it.
    You are making it entertaining and you still take
    care of to keep it sensible. I can’t wait to learn much more fromm you.
    This is really a terrific web site.

  3. September 13, 2012 at 4:02 amHi everyone.Basically I will have a bnuesiss which I outsource websites to be designed for clients. Clients come to me for a website for their bnuesiss, I use my freelancers who have knowledge in website design using Joomla. They design the website for me, I then sell the design to my clients.My questions are1.Is this actually legal, after all Joomla is a free open source? My understanding is that if we are charging the clients for the expertise in designing the websites, and no charges will be relating to the actual Joomla program itself. I will also advise my clients that Joomla is a free program etc, and make it clear that they are charged only for the expertise/knowledge put to use in creating the website.2.If the above situation is true I am sure that millions of people are doing this for bnuesiss purposes. Therefore How does Joomla make any sort of profit at all?Thanks everyone. Also can you point me to anywhere where it specifically says this is allowed by Joomla.Thanks again

  4. September 12, 2012 at 5:02 amHello, I’m a bit new with joomla, so there’s this reoastritign form that I’m enhancing its design on my friend joomla site, so I put a new html page with the same name of the reoastritign page (to replace the one formed by joomla itself, & there was no problem with that), but I think there’s some kind of php on the form code, so how can I get that code, like where can I find it in the joomla adminstrator panel or even the template for it anywhere over the internet? thanks alot, I really appreciate it.

  5. First impressions are that it’s a great tool thnkas for letting us know about it Nancy.A useful feature is to filter out your own IP address. You can do this by going to Preferences/IP Tags & Filters. There’s an option there to add (ie filter out) your IP address, or to filter out by cookies (if you have a dynamic IP).Saves a lot of over-excitement at seeing all the visitors coming in that are really just you checking your own site!

  6. October 18, 2012 at 11:20 amCan i design my whole weibste in dreamweaver, then upload to joomla, then add other ad-ons later.April Can i make the whole weibste in dreamweaver then upload the entire site all at once, or do i have to do it page by page, can anyone give me a tatorial on how to do this thanks, much appreciated.

  7. why not making some rllaey basic php css and xhtml tutorials (like the c++ series from antiRTFM) cuz if you can rllaey expain things rllaey well like antiRTFM and it would be great if you make a series of basic stuff. cuz most of tutorials u see on utube are just telling you what to write.. so you make a webpage but u have no idea what u just did

  8. believe it or not, I am working on that just have a LOT of tnihgs going on right now about 5 different sites I’m administering and also providing training and support for an online software company just hard to find time in a day but, I do want to do this and have some videos I’ve been working on that are similar to what you’re saying here

  9. Some individuals are displacing their feelings in making scrapbooks;
    it`s whateverr they call a displacement type of defense mechanism.
    In today’s current economic environment, selling has never bwen more competitive.
    The strategijes that are formulated usually are not always the one thaat is implemented through the management.