Ajaxify Your Joomla! Powered Site

Wednesday, 02 September 2009 08:17

While designing this layout, I had several things I wanted to accomplish; I wanted the site to be Joomla! based, I wanted the layout to be something food related, and I wanted to take advantage of some jQuery plugins to make the site more fluid.

One of the biggest things I wanted to accomplish was an Ajax-like load between some of the smaller pages (About, Services, Blog).  There is a jQuery plugin called “Ajaxify” (http://maxblog.me/ajaxify/) that makes it a breeze to convert any link into an Ajax load.  I encountered a few road blocks along the way, so I wanted to document how I managed to implement the Ajaxify plugin on my Joomla! website.

This is more of an overview of the solution, rather than a detailed walkthrough, so it requires some intermediate knowledge of Joomla!, java script, as well as Joomla! template design.

The first issue I found was that jQuery and MooTools don’t seem to play well in Joomla!  After some research on the jQuery website, I found that you could run jQuery in “No Conflict” mode.  According to the instructions here (http://docs.jquery.com/Using_jQuery_with_Other_Libraries#Overriding_the_.24-function), you simply call jQuery.noConflict() after loading both libraries and then I made all of my jQuery calls using jQuery(#class).function rather than the short cut method of $j(#class).function.  This alleviated most of the issues I had with code not running at all.

After including the Ajaxify plugin, I was able to convert links within my webpage to Ajax loads by building a function to associate the “ajaxify” class:

jQuery(".ajaxify").ajaxify({

animateOut:{opacity:'0'},

animateOutSpeed:300,

animateIn:{opacity:'1'},

animateInSpeed:300,

target: '#main_wrapper',

loading_img:'<?php echo $this->baseurl ?>/templates/<?php echo $this->template?>/images/loading.gif',

});

This code tells jQuery to Ajaxify any link with a class of “ajaxify.”  An example of a link would be:

<a class="ajaxify" href="/index.php?option=com_content&view=article&id=15&Itemid=18">Services</a>

The second issue I ran into was trying to keep Joomla! from sending me the entire page again when I needed to do an Ajax load.  When you load a normal Joomla! menu link, it returns the page, wrapped in the template, with all the modules set to display on that page.  Because the Ajaxify plugin is updating a specific div on the page with the link, it looked like a page embedded within a page.  The main template is already displayed on screen so I needed a way to have Joomla! just send me the content for the component.

I accomplished this by creating a second template to use for Ajax menu links.  I built a template that had no style whatsoever.  I did not load anything other than the com_component module.  An excerpt from the index.php is below:

<div id="mainbody">

<jdoc:include type="component" />

</div><!-- end mainbody -->

This template simply loads the component (content) without any external modules or template styling.  Since the content returned from this link will be dropped within the main_wrapper div by the Ajaxify plugin that works perfectly for this solution.  In order to tell Joomla when to use this alternate template, I created a second menu, which I named “Ajax” that mirrored my original menu, but associated the un-styled template to any links in this menu that I wanted to “Ajaxify.”

The Ajax menu that I created is not shown on any page, it serves only as a purpose to build links that are used by the Ajaxify plugin.  When you create the menu, Joomla! creates links that are specific to that menu, and therefore specific to the template that you have associated with those menu items.  I could then use the links from this menu to hardcode into my original template for the Ajax menu.

My final menu html was added to the template (the downfall is that it’s hard coded, rather than based on the Joomla! menu system):

<div id="main_menu">

<ul id="menu">

<li><a href="http://www.ryaneade.com/"><span>Home</span></a></li>

<li><a href="/index.php?option=com_portfolio&view=categories&Itemid=16">Portfolio</a></li>

<li><a class="ajaxify" href="/index.php?option=com_content&view=article&id=14&Itemid=12">About</a></li>

<li><a class="ajaxify" href="/index.php?option=com_content&view=article&id=15&Itemid=18">Services</a></li>

<li><a class="ajaxify" href="/index.php?option=com_content&view=section&layout=blog&id=4&Itemid=19">Blog</a></li>

<li><a href="/index.php?option=com_contact&view=contact&id=1&Itemid=5">Contact</a></li>

</ul>

</div>

Only the menu links that I added class=”ajaxify” will load using the jQuery plugin, and the rest will reload the entire page.  Try it out on my website, click on the different links on the menu and notice the difference between those that are Ajaxified and those that are not.