Adding Javascript using Joomla! API’s
Introduction
This document will explain how to add Javascript code to your template. It willalso explain how this can be expanded to components, modules and anywhere you liketoo but, also the Joomla! API guarantee us to add it in a consistent form and on thecorrect 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 thegetDocument function that is inside the JFactory class and stores a reference of iton the $document variable.
$document=& JFactory::getDocument();
•
Every statement ends with a semicolon (;)
•
The equal ampersand (=&) in the middle of the variable and function saysreference that means give me the original not a copy of it.
•
The arrow(->) after variables mean the variable holds and object inside it andcalls 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 performtheir jobs.
•
There’s a variable called
$this
it means the class you are in. Example, if youare putting this in the template
$this
will give us the document.
•
Code has to go inside the php tags
<?php ?> f
or it to be executed, if not itwill 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 andaddScript 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 fileis in the root folder of the Joomla! installation.In a template you will call it the following way using the this variable, because thetemplate 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 templateresides.
<?php// no direct accessdefined( '_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 documentreference using this line of code. This line of code will store the document reference intothe 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.
<?phpdefined('_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 theaddScriptDeclaration function. Example:If you are calling it inside a template you will use the $this variable and inside the doublequotes you will pass it Javascript code in this case an alert function that will display HelloJoomla! To the user.
<?php// no direct accessdefined( '_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 bygetting 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
<?phpdefined('_JEXEC') or die();jimport( 'joomla.application.component.view');class AlliesViewAllies extends JView{function display($tpl = null){global $mainframe, $option;
$document =& JFactory::getDocument();
Search History:
Result 00 of 00
00 results for result for
p.
Joomla! v 1.5 Adding Javascript to your Template
by Anner J. Bonilla (annerajb)
Google Highly Open Participation Contest
Joomla!
Google Highly Open Participation Contest
Joomla!
90.5K
Reads
118
Readcasts
21.2K
Embed Views
Recommended
More From This User
Notes
Load more
