Difference between revisions of "Adding JavaScript"

From Joomla! Documentation

Line 9: Line 9:
 
[[Category:Components]]
 
[[Category:Components]]
 
[[Category:Plugins]]
 
[[Category:Plugins]]
 +
[[Category:Tutorials]]
  
 
Add the following code to have the javascript library /media/system/js/sample.js included in your template.
 
Add the following code to have the javascript library /media/system/js/sample.js included in your template.

Revision as of 09:41, 17 September 2010

Adding JavaScript[edit]


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' );
?>

Explanation[edit]

Ultimately you are trying to have the resulting HTML page have a javascript include 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


When you are able to load both your page and see the <script> tag in the <head> area, and be able to load the javascript from the address

Again, using the example:

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

Then the script is integrated into your page, and you can proceed to using javascript in your HTML.

Do not directly add the <script> to your template's index.php.

The code will insert the 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 your template and view the page, and ensure that the sample.js is included in the <head>

Adding Javascript Files Using JHTML[edit]

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

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


There is a third parameter that can be passed to the script method. The parameter is a boolean (true/false). You would set this to true if you wanted MooTools loaded as well.

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

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

References[edit]

  1. Whitepaper Upgrade to mootools 1.2