ToHeader Joomla plugin
Facts - Php
Friday, 08 August 2008 11:48
Article Index
ToHeader Joomla plugin
Using the ToHeader Plugin
Download the ToHeader Content Plugin
Question
Invalid XML
Mootools.js disabled
All Pages

Why using this plugin

I have a couple of websites containing many forms. At the moment these forms use FacileForms but I would like to use more basic stuff, like javascript combined with Ajax calls.

The javascript/Ajax framework jQuery offers enough functionality to build my forms. So I would like to use jQuery from joomla 1.5.x. I did a search to see what plugins and modules are available. First I found the jxcore plugin. This is a system plugin that can be used from other plugins. I asked how to use this plugin but never got a reply. I guess that this plugin can only be used from joomla php code. This is not what I want, I want to call jQuery functions by typing javascript into the Joomla article content.

From the jQuery website I figured out that all I need is a plugin that can insert some custom javascript code into the html head tag of my joomla pages. I found another plugin that can do this: the Custom Head Tag plugin from www.joomler.net. In the plugin configuration you can enter jQuery javascript and you can include javascript files. In the plugin configuration you can also enter the id's of the articles, categories and sections in which javascript will be inserted into the html head tag. Like the jxcore plugin a system plugin: it can not be directly called from the content of a joomla article.

I tested the Custom Head Tag plugin and it indeed works with jQuery javascript. By calling jQuery from the plugin I was even able to do Ajax calls from Joomla.

I could do my coding with this plugin but what I really want is a plugin including jQuery scripts. Such a plugin would make my forms easier to administer. So I requested the author of the Custom Head Tag plugin to make the enhancement. But then I found out that what I had requested came down to coding a new plugin rather than making just a simple enhancement. So I wrote the plugin myself.


Using the ToHeader Plugin

After installing the plugin it should be enabled first. Here is an example that can be copied and pasted into your Joomla article text. This example calls jQuery javascript. Paste the example as html code, do not use the WYSIWYG html editor for editing the article:

<toheader>
<script src="/jquery-1.2.6/dist/jquery.pack.js"/>
<style>
  p { font: italic; }
</style>
<script>
<!--
$(document).ready(function(){
$("a").click(function(event){
   event.preventDefault();
   alert("Thanks for visiting- babu!");
 });
});
//-->
</script>
 
</toheader>

For the example above you also need to download jquery and install it in the root directory of your website. Don't forget to add an "index.html" in each subdirectory. Click on any link in the page containing the toheader-tag above to see the effect of the jQuery script. You should see an alert when clicking on a link.

The tags inside

toheader
 will be transferred to the html header.

To be more precisely: the code inside the

toheader
 tag will show up in the html code that corresponds to

<jdoc:include type="head" />

in your joomla template.

The ToHeader content plugin is not only suitable for using jQuery scripts in your Joomla website. It is also possible to use the ToHeader content plugin with similar javascript/Ajax frameworks such as the Dojo Toolkit. But to be honest, I have not tried using the Dojo Toolkit with the ToHeader plugin.

Example: customtag element

The custom tag element can be used to include other code than script and link tags into the HTML head element. You can use as many customtag elements as you want and they will appear in the same order inside the HTML header.

For example you can use the customtag element for including browser dependent javascript code:

<toheader>
  <customtag>
    <!--[if IE]>
      <script type="text/javascript" src="/jQuery/flot/flot-0.5/excanvas.pack.js">;</script>
    <![endif]-->
    <script type="text/javascript" src="/jquery/jquery.pack.js">;</script>
    <script type="text/javascript" src="/flot/jquery.flot.js">;</script>
  </customtag>
</toheader>
 

In this case the jquery.flot.js depends on the jquery and excanvas scripts. So the correct order of the scripts in the HTML head tag is first the excanvas script and then the jquery script and finally the flot script.

The browser dependent script jquery.flot.js can not be included with just a script tag, because it needs XML comment tags. Therefore I use the customtag element to include it.

Internally this customtag element triggers a call to the JDocument::customtag method of the Joomla API (1.5.10). Unfortunately the customtag method puts content always after script and link elements. So if we used a customtag element just for the excanvas script and then just used script elements for the other scripts the excanvas script would be included after the other two scripts in the HTML head element.

So the only way to get the order of the three scripts right is including each script inside the "customtag" element.

Also note the empty javascript statement, ";", inside the script tags. Javascript between script tags in combination with an src attribute should be ignored by browsers, but the ToHeader plugin needs it. The ToHeader plugin treats the content of the customtag element as xml. So without these empty statements the mandatory closing script tags (</script>) would not be in the content of the resulting page.


Download the ToHeader Content Plugin

  • This plugin only works with PHP 5 and above.
  • This plugin only works with Joomla 1.5.x in native mode
  • Using an WYSIWYG HTML editor for editing pages containing this plugin is not recommended.
  • If you plan to write many pages using jQuery then you should consider combining the Custom Head Tag plugin with the ToHeader Content plugin. The ToHeader Content plugin is can be used to include the jQuery core script (jquery-1.2.6/dist/jquery.pack.js in the example) and the ToHeader Content plugin will include your custom code. This will make upgrades of the jQuery package less time consuming.

The plugin is released under the GNU/GPL license v2 and you can download it here: ToHeader Content Plugin


Question

I have tried to use the plugin in my joomla. However, its not working.

"It's not working" does not tell me very much. What are you exactly trying to do, and can you describe the problem in more detail ?

Things to check, see the previous page:

  1. Have you enabled the ToHeader plugin ?
  2. Is your website using php 5 and joomla 1.5 native ?
  3. Is the path to the jQuery javascript code correct ? Note that I added an extra leading forward slash in the example.
  4. Did you disable the WYSIWYG HTML editor in joomla ?
  5. Does your joomla template contain the following: <jdoc:include type="head" />
  6. Does the toheader tag contain valid XML ? See below.
  7. Are you using php code in your template in order to disable loading mootools.js in the frontend ? See below

Invalid XML

I got the following error message:

Warning: SimpleXMLElement:...Entity: line 4: parse error: Opening and ending tag mismatch: meta line 3 ...

My code is:

<toheader>
<meta name="revisit-after" CONTENT="7 days">
<meta name="aesop" CONTENT="sales">
</toheader>

This means that you did not put valid XML inside the toheader tags. Th meta tags inside the toheader tags are not closed. Change them to the following:

<toheader>
<meta name="revisit-after" CONTENT="7 days"/>
<meta name="aesop" CONTENT="sales"/>
</toheader>

If your code contains javascript then don't forget to put xml comments around the javascript code inside any script tags, see the example on the first page of this article. Even with xml comments around your javascript code do not use the −− operator (decrease with one) inside the toheader tags.


Mootools.js disabled with php code in index.php of the template

Many joomla 1.5 users recommend disabling the loading of mootools.js (Mootools v1.1) in the frontend. This javascript file is only needed in the backend and by some custom plugins/modules. Disabling the loading of this file reduces a lot of bandwidth.

Mootools.js is often disabled using php code in the head tag of the index.php of your template. Usually this php code has the side effect of deleting the script tags from the ToHeader and the CustomHeadTag plugins as well.

If you disable Mootools.js with such php code then you can still include your scripts with the customtag element inside the ToHeader plugin. See the example above.