Actions

Adding JavaScript

From Joomla! Documentation

Revision as of 05:29, 17 September 2012 by Haydenyoung (Talk | contribs)

Quill icon.png
Page Actively Being Edited!

This article is actively undergoing a major edit for a short while.
As a courtesy, please do not edit this page while this message is displayed. The user who added this notice will be listed in the page history. This message is intended to help reduce edit conflicts; please remove it between editing sessions to allow others to edit the page. If this page has not been edited for several hours, please remove this template, or replace it with {{underconstruction}} or {{incomplete}}.

Contents

Adding Javascript


This chunk should describe in detail how to add Javascript to the head of a template using the Joomla! 1.5 API calls. It should be aimed at people who have only minimal knowledge of PHP, HTML and Javascript.

Add the following code to have the Javascript library /media/system/js/sample.js included in your template.

<?php
$document = &JFactory::getDocument();
$document->addScript( '/media/system/js/sample.js' );
?>

The above code must be added to your template's template.php file. Usually this file is located at (example): /templates/(theme name)/layouts/template.php

Explanation

Ultimately you are trying to have the resulting HTML page have a Javascript included in the head element (i.e. <head> ... </head>):

For example:

<script type="text/javascript" src="/media/system/js/sample.js"></script>

Ensure that the Javascript you want to include is in the directory, from the above example:

  /media/system/js/sample.js

Load your page into a browser and verify that the <script> tag is in the <head> area and able to load the Javascript. Again, using the example:

  http://www.example.com/media/system/js/sample.js

When successful the script is integrated into your page. Now you can use Javascript in your HTML.

Do not directly add the <script> to your template's index.php. The code will insert the <script> line where your index.php has the following line:

<jdoc:include type="head" />

Add this PHP code to your page, in the head, or next to the Javascript code you will use, depending on your preference.

<?php
$document = &JFactory::getDocument();
$document->addScript( '/media/system/js/sample.js' );
?>

Reload and view the page. Ensure that the sample.js is included in the <head> section.

Adding Javascript Files Using JHTML

You may also use the JHTML script method to add a Javascript file to the head of your document.

<?php
$filename = 'filename.js';
// Add the path parameter if the path is different than 'media/system/js/'
$path = 'path/to/file/';
JHTML::script($filename, $path);
?>

There is a third Boolean argument that can be passed to the script method. Set this to true if you also want MooTools loaded.

<?php
$filename = 'filename.js';
// Add the path parameter if the path is different than 'media/system/js/'
$path = 'path/to/file/';
// MooTools will load if it is not already loaded
JHTML::script($filename, $path, true);
?>

Please Note: Joomla 1.6+ may handle MooTools differently than in previous versions. [1]

References

  1. Whitepaper Upgrade to mootools 1.2