|
If we want to put Javascript code in a page generated by Joomla, we can embed Javascript code segments in a content item between <script> tags. This has several disadvantages, which are addressed in this article. More efficient ways of embedding Javascript in Joomla pages are explored.
How does one put Javascript in the pages generated by Joomla? We can embed Javascript in a content item between <script type="text/javascript">...</script> tags. But what if we want some content items contain the same [piece of] javascript code? It would be best to put it in a file and include it in a page with <script type="text/javascript" src="filename.js"> ; ... </script> tags, where filename.js is the name of a javascript file that contains the code we want to include in each page.
We could put this tag in a content item's body. The disadvantages of it are these:
You have limited control over where in a content item you put the <script> tag. The HTML of a content item is created by the mosMainBody() function, and the mosMainBody() function is called only after the functions that create the header and the menus have been called. So there's not much chance to put the script before or inside the header and menu code.
To have full control over where you include the script, we need to put "hooks" in the index.php file of the template. I use as an example the default template that comes with Joomla, rhuk_solarflare_ii. The index.php file is located in the templates/rhuk_solarflare_ii directory.
It is possible to put a <? php > statement anywhere in index.php.
Of course, if you put a <script type="text/javascript" src="filename.js"> ; ... </script> statement in the index.php of your template, then each and every page will include the Javascript code contained in filename.js. This may not be what you want. Perhaps you want some pages -- e.g. those belonging to a particular section -- to include certain Javascript files, whereas pages in another section should include other Javascript files, and the pages in yet another section should contain no Javascript code at all. If so, we need to tell index.php which code files to include in each case.
How do we tell it that? We can add the names of the files that need to be included in each page to the list of parameters for that page. Parameters of a content item can be seen by going to Content Item: Edit page and clicking "Parameters" in the right sidebar menu. The parameters that you see are default parameters that come with Joomla installation. In addition to the parameters that are built into Joomla, you can create your own parameters.
To create your own parameters, let's open the content.xml file that's located in the administrator\components\com_content\content.xml directory of your Joomla installation. In this file there are listed parameters you see when you click on the Parameters tab in the Content Item: Edit page. Let's add another parameter to it. This parameter will tell us which Javascript files to include in this page. Let's insert this line before the </params> tag:
<param name="include_scr" type="text" size="50" default="" label="Include javascripts"
description="Javascript files to be included in the page" />
If you go to the Content Item: Edit page now, you'll see an additional line at the bottom of the Parameters tab, with a title "Include javascripts". Here we can enter the names of the scripts to be included in this cotent item. They will be stored where the rest of a content item's parameters are stored: in the attribs field of the jos_content table in the database.
We may need to include more than one Javascript file. In that case the file names can be separate by a delimiter chosen by us, for example, a colon (:). It doesn't matter what the delimiter is, as long as we are sure that it can't be a part of a Javascript source file name.
Now let's put code "hooks" in index.php. Once we decide where in the file the script must be included, we'll put in a PHP code snippet that would read this content item's parameters (more accurately referred to as attribs from the database, parse them, and determine the names of the Javascript source code files.
These lines will select this content item's attribs from the jos_content table:
$sql = "SELECT attribs FROM #__content WHERE id = '". $id ."'";
$database->setQuery( $sql );
$row = $database->loadResult();
This line will get the value of the include_scr parameter and put it in the first variable of the $includedJS array.
$includedJS = explode("include_scr=", $row);
Let's say there is more than one Javascript file that needs to be included in this page, and their names were separated in the include_scr attrib by a colon. Then we need to split the first element of the $includedJS array along the colons. (First, we check whether the first element of $includedJS exists at all, i.e. $includedJS is not empty. We can't be sure, because this content item may not have an include_scr attrib, in which case $includedJS would be empty.)
if ($includedJS[1]) {
$includedScrs = explode(":", $includedJS[1]);
$includedScrs is an array of filenames of scripts that need to be included in the page whose HTML is currently being created by executing index.php. The following loop will include them:
foreach ($includedScrs as $scr) {
?>
<script type="text/javascript" src="<?php echo $scr; ?>"></script>
<?php
}
}
Now we need to update the appropriate rows in the jos_content table. We login into the database our Joomla installation uses, find the jos_content row whose id field is equal to the id of the article in which you want to insert Javascript file(s), and edit its attribs field, adding this line to it:
include_scr=includes/js/filename1.js:includes/js/filename2.js
(or more colon-separated file names, if there are more.) |
