How to Use AJAX in Joomla Templates
Not long ago Ajax was something like a surprise. And now it pesters everyone and their brother. There are the whole portals that work solely on Ajax. And Joomla also work with Ajax. This article will tell you of how you can add Ajax technology to your template.
Problem definition
As a first step, we need to make a clear conception of what we want to see in a result:
- When clicking a menu link, content should be loaded to the required area of the page instead of page reloading.
- The template should be compatible with all Joomla extensions.
- The method we’ll do it should be the simplest (without components and hacks).
Implementation
Viewing the problem definition you may ask a few questions. How you should load your content using Ajax? How you should insert it in the right place then? And the main question: how you should get the content to be loaded and inserted? Because you know we deal with CMS but not with static HTML pages stored on server.
JavaScript is the basis of Ajax. Its area of action is limited by browser. It can load various documents from the server, for example, images, but using the abilities of browser (via HTTP protocol) and nothing else.
Roughly speaking, if you can access the file in your network typing something like that: http://som_site.com/file.html in browser address bar then you can access this file through JavaScript.
In the case of static documents you can easy call them in the method described above (by link). But there is a little problem: we need to get content which is to be output in a usual template in the following position:
<?php echo mosMainBody();?>
And this is possible! To do so, change index.php to index2.php in the Joomla link address and add &no_html=1 parameter to the end of it.
Thus usual link to the main page appears like:
http://som_site.com/index.php?option=com_frontpage&Itemid=1
and link to the page which contain component output and nothing else (which is output by mosMainBody function) will look like:
http://som_site.com/index2.php?option=com_frontpage&Itemid=1&no_html
How to load the component using Ajax?
We will use ready library to load content using Ajax method. There are a great number of libraries now and you can meet some problems choosing the right one. And it is almost useless to ask developers in professional forums – in the best case you will know a few libraries you should try and choose from.
We have a clear goal and should fulfill it. Therefore we do not need libraries with a huge functionality if it doesn’t meet our needs.
We will use Dynamic Ajax Content library of DynamicDrive.
The first we should do is to include the library to the page. Just put the following line to the HEAD of the template::
<head>
<script type="text/javascript" src="<?php echo $mosConfig_live_site;?>/templates/web2/ajaxlib.js"></script>
</head>
To use it you should specify the following as a link:
<a href="javascript:ajaxpage('http://som_site.ru/file.html', 'content');">ajax link</a>
where http://som_site.com/file.html is an address of the page you will load the content to. It is ID of DIV container content of file.html have to be placed in.
I.e. in our case the link will looks like:
<a href="javascript:ajaxpage('http://som_site.ru/index2.php?option=com_frontpage&Itemid=1&no_html=1', 'content');">test</a>
And div with the unique identifier id=”content” should be provided in the template.
<body>
<div id="content">
<?php echo mosMainBody();?>
</div>
</body>
mosMainBody() will be output in the same container when first site load.
Changing links
Joomla output links in the following way:
http://som_site.ru/index.php?option=com_frontpage&Itemid=1
and we need them to be output as:
javascript:ajaxpage('http://som_site.ru/index2.php?option=com_frontpage&Itemid=1&no_html', 'content');
therefore we should change links output in mod_mainmenu module. Also, download and install mod_ajaxmenu module.
mod_mainmenu outputs different links: links which are opened in a new window, links which are opened in popup window and links which are opened in a parent window.
Changes should concern only those links which are opened in a parent window. They are formed in mod_mainmenu.php.
// open in parent window
$txt = '
<a href="'. $mitem->link .'" class="'. $menuclass .'" '. $id .'>'. $mitem->name .'</a>';
Change index.php to index2.php:
$ajaxLink = str_replace("index", "index2", $mitem->link);
Bring the received URL to the required appearance:
$ajaxLink = "javascript:ajaxpage('$ajaxLink', 'content');";
And all in one:
// open in parent window
$ajaxLink = str_replace("index", "index2", $mitem->link);
$ajaxLink = "javascript:ajaxpage('$ajaxLink', 'content');";
$txt = '<a href="'. $ajaxLink .'" class="'. $menuclass .'" '. $id .'>'. $mitem->name .'</a>';
Resume
Now we have a menu module that output links in the required appearance and we have JavaScript library which allows dynamic loading of content.
So if you wish to use AJAX in your template you should:
- Include Dynamic Ajax Content library:
<head>
<script type="text/javascript" src="<?php echo $mosConfig_live_site;?>/templates/web2/ajaxlib.js"></script></head>
- Install mod_ajaxmenu module.
- add the following line to the div container of the template’s public area with ID="content":
<div id="content">
<?php echo mosMainBody();?>
</div>
