Please note that this is only an Idea for ajaxifying Joomla, there is no garantee if it works correctly or not and this is under development. We use this opensource template as an example to demonstrate the idea of ajaxifying joomla and you can extend this work on your own templates if you follow this tutorial. We are currenlty developing this template to make it compatible with IE browser. If you think you can help us please do not hesitate to send your modified template to This e-mail address is being protected from spam bots, you need JavaScript enabled to view it

In this tutorial you will learn how to ajaxify a joomla template using Mootools javascript framework.

First take a look at this demo to see if it actually works! http://demo.web2coder.com

Introducing Mootools:

MooTools is a compact, modular, Object-Oriented JavaScript framework designed to make writing extensible and compatible code easier and faster. MooTools lets you get the job done efficiently and effectively.

Step 1: Downloading Motools

Ok, first download the latest mootools version from Here and select ajax and dom from the list. If you think its hard don't worry you can download the whole template later on here that would include mootools as well. but it better than you see how it works so that later on you can download it your self for further works.

Step 2: Knowing some simple points about Ajax

AJAX stands for Asynchronous JavaScript And XML

AJAX is not a new programming language, but a technique for creating better, faster, and more interactive web applications.

With AJAX, your JavaScript can communicate directly with the server, using the JavaScript XMLHttpRequest object. With this object, your JavaScript can trade data with a web server, without reloading the page.

AJAX uses asynchronous data transfer (HTTP requests) between the browser and the web server, allowing web pages to request small bits of information from the server instead of whole pages.

The AJAX technique makes Internet applications smaller, faster and more user-friendly.

Step 3: Ajax Class of mootools

As you know each JS frameworks and toolkits has an ajax class that would make all those hard scripting much easier and accessible for developers and programmers. So by just knowing how to use these kind of frameworks you can easier build up your web application.

The mootools ajax class is a very simple way of making request to server-side scripts.  It has two arguments 1.Request 2.Evalscripst and the following properties:

Here you can see an easy example:

var myAjax = new Ajax(url, {method: 'get'}).request();

Step 4: Starting to ajaxify your template

Overall things that you need to consider:

1. making a file named ajax.js that contains all the essential functions
2. including both mootools.js and ajax.js in head of our index.php page
3. Placing Preloader division where ever you want.
   
4. Placing a Division with an ID named "whatever!" i.e <div id="ajaxcontainer"> where the mainbody of our template located and place the actuall mainbody inside it so that when you make a request the response content would be show up itself there.
5. A simple JS code that would change all the links inside the page to something like this:
6. javascript:ajaxload('index2.php?option=com_frontpage&Itemid=1')
7. Deactivate SEO option in Joomla Configuration ( It wouldn't work without that! )
   

That's it! it wouldn't take that much time when you get all these things ready.

I will not go into details. I made enough documentation of what i have done in the sample template but i will just point to some of the mentioned things.

Please note that the ajaxcontainer should be placed like this:

<div id="ajaxcontainer">
    <div id="main_content">
        <?php mosMainBody(); ?>
    </div>
</div> 
   

and also don't forget to place the ajaxlink function before the end of body tag:

<!-- Start of AjaxLink function for changing all the links of page -->
<script type="text/javascript">
<!--
function ajaxLinks () {
for (var i=0;i < document.links.length;i++) {
if(document.links[i].href.substr(0,<?php echo strlen($mosConfig_live_site)?>)=="<?php echo $mosConfig_live_site ?>"||document.links[i].href.substr(0,9)=="index.php:"){
document.links[i].href = "javascript:ajaxload('index2.php"+document.links[i].href.substring(<?php echo strlen($mosConfig_live_site)+10?>)+"')";
}}}
ajaxLinks();
-->
</script>
<!-- End of AjaxLink function -->
</body>
</html> 
   

That's it. Now you can download the template from here . I made all these things for free, and you can use it where ever you want without my permission, but please don't remove the link in footer.

Please feel free to leave your comments here. or sending me email to This e-mail address is being protected from spam bots, you need JavaScript enabled to view it

External Resources

• A complete Mootools Tutorial (The Mootorial) - by Aaron Newton at CNET's Clientside

• Mootools: ‘Ajax & XHR’ classes - by Bas Wenneker at Solutoire.com

• http://docs.mootools.net/files/Remote/Ajax-js.html
• http://www.w3schools.com/ajax/ajax_intro.asp