Adding Javascript using Joomla!

API’s Introduction This document will explain how to add Javascript code to your template. It will also explain how this can be expanded to components, modules and anywhere you like too but, also the Joomla! API guarantee us to add it in a consistent form and on the correct place so, it doesn’t break compatibility with the XHTML standard. Requirements: Basic knowledge of PHP. PHP basics: If you already know PHP you can skip this part. • Variables start with dollar sign($) • Functions are code blocks that you can call to do stuff. This line below calls the getDocument function that is inside the JFactory class and stores a reference of it on the $document variable. • • • • • • • $document =& JFactory::getDocument(); Every statement ends with a semicolon (;) The equal ampersand (=&) in the middle of the variable and function says reference that means give me the original not a copy of it. The arrow(->) after variables mean the variable holds and object inside it and calls a function from that object. Comments are ignored by code and start with double slash (//) Multi line comments are encapsulated inside /* */ Argument are values passed to function they will use the arguments to perform their jobs. There’s a variable called $this it means the class you are in. Example, if you are putting this in the template $this will give us the document. • • • Code has to go inside the php tags <?php ?> for it to be executed, if not it will display on the page whatever code youtyped as normal text. You can get the base folder where Joomla! is installed using JURI::base() The value of the $this->template variable inside a template is the template folder name. This can be useful for adding the template name to a directory.

Introduction to Joomla! Api’s. Joomla! provides us with some functions so, you can add the Javascript in the correct place, this functions can be called from anywhere in the code and they will not break compatibility with the XHTML standard. These functions are addScriptDeclaration and addScript they allow us to insert Javascript code and insert a Javascript (.js) file.

Adding Javascript using the addScript function: If you will like to add a external .js file you will use the addScript function and pass as a argument the path and name of the .js file you should also specify the whole path of your Javascript file by using the JURI:base function. In this case, the hello.js file is in the root folder of the Joomla! installation. In a template you will call it the following way using the this variable, because the template is called by the document class where the addScript function is located. Note: we add JURI::base() before the hello.js to prefix the path of the folder where Joomla! resides and $this->template to get the name of the folder where the template resides.
<?php // no direct access defined( '_JEXEC' ) or die( 'Restricted access' ); $js = "/templates/".$this->template."/hello.js"; $this->addScript(JURI::base() . $js); ?>

If you where calling this from a component or module you will need to get the document reference using this line of code. This line of code will store the document reference into the document variable.
$document =& JFactory::getDocument();

And call the function to add the javascript file. Note: we add JURI::base() before the hello.js to prefix the path of the folder where Joomla! resides.
<?php defined('_JEXEC') or die(); jimport( 'joomla.application.component.view'); class AlliesViewAllies extends JView { function display($tpl = null) {

global $mainframe, $option; $document =& Jfactory::getDocument(); $js = "/templates/".$this->template."/hello.js"; $document->addScript(JURI::base() . $js);

Adding Javascript using the addScriptDeclaration function: If you will like to add a small piece of Javascript code you will use the addScriptDeclaration function. Example: If you are calling it inside a template you will use the $this variable and inside the double quotes you will pass it Javascript code in this case an alert function that will display Hello Joomla! To the user.
<?php // no direct access defined( '_JEXEC' ) or die( 'Restricted access' ); $this->addScriptDeclaration("alert('Hello Joomla!')"); ?>

If you will like to add this Javascript from a module or a component you will do it by getting a reference of the document using the getDocument Function:
$document =& Jfactory::getDocument();

And now you call the function using the document variable
$document->addScriptDeclaration("alert('Hello Joomla!')");

the code will like like this
<?php defined('_JEXEC') or die(); jimport( 'joomla.application.component.view'); class AlliesViewAllies extends JView { function display($tpl = null) { global $mainframe, $option; $document =& JFactory::getDocument();

$document->addScriptDeclaration("alert('Hello Joomla!')");