Adding JavaScript: Difference between revisions

From Joomla! Documentation

← Older editNewer edit →
Batch1211 (talk | contribs)
753 edits
No edit summary
Cmb (talk | contribs)
956 edits
Added code markup. Corrected spelling, repeated words, grammar.
Line 1: Line 1:
{{cookiejar}}
{{cookiejar}}
===Adding JavaScript===
===Adding Javascript===
----
----
This chunk should describe in detail how to add JavaScript to the head of
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
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.
people who have only minimal knowledge of PHP, HTML and Javascript.
[[Category:Templates]]
[[Category:Templates]]
[[Category:Modules]]
[[Category:Modules]]
Line 11: Line 11:
[[Category:Tutorials]]
[[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.


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


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


Ultimately you are trying to have the resulting HTML page have a javascript include in the head element (i.e. <head> ... </head>):
For example:
 
<source lang="php">
For Example:
<script type="text/javascript" src="/media/system/js/sample.js"></script>
<script type="text/javascript" src="/media/system/js/sample.js"></script>
</source>
 
Ensure that the Javascript you want to include is in the directory, from the above example:
Ensure that the javascript you want to include is in the directory, from the above example:
  <nowiki>/media/system/js/sample.js</nowiki>
/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:  
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:  
   <nowiki>http://www.example.com/media/system/js/sample.js</nowiki>
   <nowiki>http://www.example.com/media/system/js/sample.js</nowiki>


Then the script is integrated into your page, and you can proceed to using javascript in your HTML.
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 the <script> line where your index.php has the following line:


<jdoc:include type="head" />
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:
 
<source lang="php">
Add this PHP code to your page, in the head, or next to the javascript code you will use, depending on your preference.
<jdoc:include type="head" />
 
</source>
<?php
Add this PHP code to your page, in the head, or next to the Javascript code you will use, depending on your preference.
$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>


<source lang="php">
<?php
$document = &JFactory::getDocument();
$document->addScript( '/media/system/js/sample.js' );
?>
</source>
Reload and view the page. Ensure that the sample.js is included in the <head> section.
== Adding Javascript Files Using JHTML ==
== Adding Javascript Files Using JHTML ==
You may also use the [http://api.joomla.org/Joomla-Framework/HTML/JHTML.html JHTML] [http://api.joomla.org/Joomla-Framework/HTML/JHTML.html#script script] method to add a Javascript file to the head of your document.


You may also use the [http://api.joomla.org/Joomla-Framework/HTML/JHTML.html JHTML] [http://api.joomla.org/Joomla-Framework/HTML/JHTML.html#script script] method to add a javascript file to the head of your document.
<source lang="php">
 
<?php
<?php
$filename = 'filename.js';
    $filename = 'filename.js';
// Add the path parameter if the path is different than 'media/system/js/'
    $path = 'path/to/file/'; // add the path parameter if the path is different than : 'media/system/js/'
$path = 'path/to/file/';
    JHTML::script($filename, $path);
JHTML::script($filename, $path);
?>
?>
 
</source>
 
There is a third Boolean argument that can be passed to the script method. Set this to true if you also want MooTools loaded.
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.
<source lang="php">
 
<?php
<?php
$filename = 'filename.js';
    $filename = 'filename.js';
// Add the path parameter if the path is different than 'media/system/js/'
    $path = 'path/to/file/'; // add the path parameter if the path is different than : 'media/system/js/'
$path = 'path/to/file/';
    JHTML::script($filename, $path, true); // MooTools will load if it is not already loaded
// MooTools will load if it is not already loaded
?>
JHTML::script($filename, $path, true);
 
?>
'''Please Note: Joomla 1.6+ may or may not handle MooTools differently than in previous versions.'''<ref>[http://forum.joomla.org/viewtopic.php?f=502&t=273960 Whitepaper] Upgrade to mootools 1.2</ref>
</source>
'''Please Note:''' Joomla 1.6+ may handle MooTools differently than in previous versions. <ref>[http://forum.joomla.org/viewtopic.php?f=502&t=273960 Whitepaper] Upgrade to mootools 1.2</ref>


== References ==
== References ==
<references/>
<references/>

Revision as of 23:04, 26 December 2010

 This article is a small, well-defined item that could be completed by someone with a reasonable knowledge of the subject matter and a modest time commitment. If you would like to try writing this article you're welcome to do so.

The subject may be self-evident, but if not then further details should be available on the discussion page. Please add {{inuse}} at the top of this page while editing. For other small, well-defined tasks, please look in the Cookie jar. ---Thank you.

This article was last edited by Cmb (talk| contribs) 15 years ago. (Purge)

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

Explanation

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

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
Retrieved from "https://docs.sandbox.joomla.org/index.php?title=Adding_JavaScript&oldid=33613"