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!')");