Adding JavaScript - Revision history

Robbiej: Added reference to https://docs.joomla.org/J3.x:Adding_JavaScript_and_CSS_to_the_page

2020-01-17T11:15:57Z

Added reference to https://docs.joomla.org/J3.x:Adding_JavaScript_and_CSS_to_the_page

← Older revision		Revision as of 11:15, 17 January 2020
Line 3:		Line 3:
	series</translate>}}</noinclude>		series</translate>}}</noinclude>
	{{-}}		{{-}}

			'''Note that a more up-to-date Joomla document covering this topic can be found at [[Adding JavaScript and CSS to the page]], although it currently doesn't cover the more advanced topics at the bottom of this page.'''

	<translate>		<translate>
	<!--T:2-->		<!--T:2-->

Astridx at 11:34, 21 February 2018

2018-02-21T11:34:18Z

← Older revision		Revision as of 11:34, 21 February 2018
Line 77:		Line 77:
	</source>		</source>

	You can use options in a third parameter. This example shows the options version and relative. The file example should be saved in the folder <tt>media/com_example/'''js'''/example.min.js</tt>. So you do NOT need to insert the <tt>js</tt> in the path you insert as second parameter.		You can use options in a third parameter. This example shows the options <tt>version </tt> and <tt>relative </tt>. The file example should be saved in the folder <tt>media/com_example/'''js'''/example.min.js</tt>. So you do NOT need to insert the <tt>js</tt> in the path you insert as second parameter.

	<source lang="php">		<source lang="php">

Astridx at 11:30, 21 February 2018

2018-02-21T11:30:50Z

← Older revision		Revision as of 11:30, 21 February 2018
Line 74:		Line 74:
	<?php		<?php
	JHtml::script(Juri::base() . 'templates/custom/js/sample.js');		JHtml::script(Juri::base() . 'templates/custom/js/sample.js');
			?>
			</source>

			You can use options in a third parameter. This example shows the options version and relative. The file example should be saved in the folder <tt>media/com_example/'''js'''/example.min.js</tt>. So you do NOT need to insert the <tt>js</tt> in the path you insert as second parameter.

			<source lang="php">
			<?php
			JHtml::_('script', 'com_example/example.min.js', array('version' => 'auto', 'relative' => true));
	?>		?>
	</source>		</source>

Abulafia at 20:46, 20 October 2015

2015-10-20T20:46:24Z

← Older revision		Revision as of 20:46, 20 October 2015
Line 271:		Line 271:
	<translate>== External Links == <!--T:45--></translate>		<translate>== External Links == <!--T:45--></translate>

	~~http~~://api.joomla.org/~~Joomla~~-~~Platform~~/~~HTML~~/JHtmlBehavior.html#~~methodframework~~		{{JVer\|2.5}} https://api.joomla.org/cms-2.5/classes/JHtmlBehavior.html#method_framework

			{{JVer\|3.x}} https://api.joomla.org/cms-3/classes/JHtmlBehavior.html#method_framework

	http://en.wikipedia.org/wiki/JavaScript		http://en.wikipedia.org/wiki/JavaScript

MATsxm: Typo

2015-06-03T21:22:52Z

Typo

← Older revision		Revision as of 21:22, 3 June 2015
Line 252:		Line 252:
	<translate>		<translate>
	<!--T:41-->		<!--T:41-->
	This happens because the Joomla API (such as $doc->addScript) uses an array to store the JS files paths and they get rendered in the document in the same order they where inserted into that array (FIFO stack), ~~also~~ once a file path is inserted on the array and another API call tries to insert the same file this action is ignored to ~~avid~~ duplicates~~, it~~ also means that the order of the files is not altered when the same files is attempted to be inserted several times.		This happens because the Joomla! API (such as $doc->addScript) uses an array to store the JS files paths and they get rendered in the document in the same order they where inserted into that array (FIFO stack). Also, once a file path is inserted on the array and another API call tries to insert the same file this action is ignored to avoid duplicates. It also means that the order of the files is not altered when the same files is attempted to be inserted several times.
	</translate>		</translate>

MATsxm: Typo

2015-06-02T23:02:14Z

Typo

← Older revision		Revision as of 23:02, 2 June 2015
Line 190:		Line 190:
	<translate>		<translate>
	<!--T:30-->		<!--T:30-->
	If you are creating a custom template override or extension that needs to add a custom JS file, make sure to add important dependencies such as Jquery or Mootools before your custom JS files. JS framework ~~fiels~~ must always be loaded before any other files to make sure they get executed first, otherwise other files that load before the frameworks they need are likely to end in JS exceptions.		If you are creating a custom template override or extension that needs to add a custom JS file, make sure to add important dependencies such as Jquery or Mootools before your custom JS files. JS framework files must always be loaded before any other files to make sure they get executed first, otherwise other files that load before the frameworks they need are likely to end in JS exceptions.
	</translate>		</translate>

MATsxm: Typo

2015-05-27T21:41:54Z

Typo

← Older revision		Revision as of 21:41, 27 May 2015
Line 46:		Line 46:
	<translate>		<translate>
	<!--T:10-->		<!--T:10-->
	There are two ways to include a JavaScript file using the Joomla API. The first involves using the [http://api.joomla.org/1.5/Joomla-Framework/Document/JDocument.html JDocument] class' [http://api.joomla.org/1.5/Joomla-Framework/Document/JDocument.html#addScript addScript] method:		There are two ways to include a JavaScript file using the Joomla! API. The first involves using the [http://api.joomla.org/1.5/Joomla-Framework/Document/JDocument.html JDocument] class' [http://api.joomla.org/1.5/Joomla-Framework/Document/JDocument.html#addScript addScript] method:
	</translate>		</translate>

Line 57:		Line 57:

	<translate><!--T:11-->		<translate><!--T:11-->
	The second uses the [http://api.joomla.org/1.5/Joomla-Framework/HTML/JHTML.html JHTML] class'[http://api.joomla.org/1.5/Joomla-Framework/HTML/JHTML.html#script script] method:</translate>		The second uses the [http://api.joomla.org/1.5/Joomla-Framework/HTML/JHTML.html JHTML] class' [http://api.joomla.org/1.5/Joomla-Framework/HTML/JHTML.html#script script] method:</translate>

	<source lang="php">		<source lang="php">
Line 68:		Line 68:
	<translate>		<translate>
	<!--T:12-->		<!--T:12-->
	API has changed in 3.x, so the second parameter cannot be a string. If you really need to use this method, you must include the absolute link to your ~~javacript~~ file:		API has changed in 3.x, so the second parameter cannot be a string. If you really need to use this method, you must include the absolute link to your JavaScript file:
	</translate>		</translate>

MATsxm at 13:32, 27 May 2015

2015-05-27T13:32:07Z

← Older revision		Revision as of 13:32, 27 May 2015
Line 57:		Line 57:

	<translate><!--T:11-->		<translate><!--T:11-->
	The second uses the [http://api.joomla.org/1.5/Joomla-Framework/HTML/JHTML.html JHTML] class'~~</translate>~~ [http://api.joomla.org/1.5/Joomla-Framework/HTML/JHTML.html#script script] method:		The second uses the [http://api.joomla.org/1.5/Joomla-Framework/HTML/JHTML.html JHTML] class'[http://api.joomla.org/1.5/Joomla-Framework/HTML/JHTML.html#script script] method:</translate>

	<source lang="php">		<source lang="php">

MATsxm: Marked this version for translation

2015-05-18T19:52:17Z

Marked this version for translation

Show changes

MATsxm: Marked for translation

2015-05-18T19:51:54Z

Marked for translation

Show changes