AJAX/Dynamic Content and Interactive Forms in Joomla!

Exclusive offer: get 50% off this eBook here
Joomla! 1.5 Template Design

Joomla! 1.5 Template Design — Save 50%

Create your own professional-quality templates with this fast, friendly guide

$26.99    $13.50
by Tessa Blakeley Silver | June 2009 | Joomla! Content Management Open Source

In this article by Tessa Blakeley Silver, we're going to take a look at the most popular methods to get you going with AJAX in Joomla!, using extensions and plugins, in order to help you include dynamic self-updating content and create interactive forms in your Joomla! site. While we're at it, we'll also look at some cool JavaScript toolkits, libraries, and scripts you can use to appear Ajaxy.

AJAX: an acronym that Jesse James Garret of AdaptivePath.com came up with in 2005. Just a few short years later, it seems like every site has a "taste" of AJAX in it. If you're totally new to AJAX, I'll just point out that, at its core, AJAX is nothing very scary or horrendous. AJAX isn't even a new technology or language.

Essentially, AJAX stands for: Asynchronous JavaScript and XML, and it is the technique of using JavaScript and XML to send and receive data between a web browser and a web server. The biggest advantage this technique has is that you can dynamically update a piece of content on your web page or web form with data from the server (preferably formatted in XML), without forcing the entire page to reload. The implementation of this technique has made it obvious to many web developers that they can start making advanced web applications (sometimes called RIAs—Rich Interface Applications) that work and feel more like software applications than web pages.

Keep in mind that the word AJAX is starting to have its own meaning (as you'll also note its occasional use here as well as all over the Web as a proper noun rather than an all-cap acronym). For example, a Microsoft web developer may use VBScript instead of JavaScript to serve up Microsoft Access database data that is transformed into JSON (not XML) using a .NET server-side script. Today, that guy's site would still be considered an AJAX site rather than an "AVAJ" site (yep, AJAX just sounds cooler).

In fact, it's getting to the point where just about anything on a web site (that isn't in Flash) that slides, moves, fades, or pops up without rendering a new browser window is considered an "Ajaxy" site. In truth, a large portion of these sites don't truly qualify as using AJAX, they're just using straight-up JavaScripting. Generally, if you use cool JavaScripts in your Joomla! site, it will probably be considered Ajaxy, despite not being asynchronous or using any XML.

Want more info on this AJAX business? The w3schools site has an excellent introduction to AJAX, explaining it in straightforward simple terms. They even have a couple of great tutorials that are fun and easy to accomplish even if you only have a little HTML, JavaScript and server-side script (PHP or ASP) experience (no XML experience required): http://w3schools.com/ajax/.

Preparing for dynamic content and interactive forms

Gone are the days of clicking, submitting, and waiting for the next page to load, or manually compiling your own content from all your various online identities to post in your site.

A web page using AJAX techniques (if applied properly) will give the user a smoother and leaner experience. Click on a drop-down option and check-box menus underneath are immediately updated with the relevant choices—no submitting, no waiting. Complicated forms that, in the past, took two or three screens to process can be reduced into one convenient screen by implementing the form with AJAX.

As wonderful as this all sounds, I must again offer a quick disclaimer: I understand that, like with drop-down menus and Flash, you may want AJAX to be in your site, or your clients are demanding that AJAX be in their sites. Just keep in mind, AJAX techniques are best used in situations where they truly benefit a user's experience of a page; for example, being able to painlessly add relevant content via an extension or cutting a lengthy web process form down from three pages to one. In a nutshell, using an AJAX technique simply to say your site is an AJAX site is probably not a good idea.

You should be aware that, if not implemented properly, some uses of AJAX can compromise the security of your site. You may inadvertently end up disabling key web browser features (such as back buttons or the history manager). Then there's all the basic usability and accessibility issues that JavaScript in general can bring to a site.

Some screen readers may not be able to read a new screen area that's been generated by JavaScript. If you cater to users who rely on tabbing through content, navigation may be compromised once new content is updated. There are also interface design problems that AJAX brings to the table (and Flash developers can commiserate). Many times, in trying to limit screen real estate and simplify a process, developers actually end up creating a form or interface that is unnecessarily complex and confusing, especially when your user is expecting a web page to, well, act like a normal web page.

Remember to check in with Don't Make Me Think: This is the Steve Krug book I recommend for help with any interface usability questions you may run into.
Really interested in taking on AJAX? For you programmers, I highly recommend "AJAX and PHP: Building Responsive Web Applications", Cristian Darie, Bogdan Brinzarea, Filip Chereches-Tosa, and Mihai Bucica, Packt Publishing. In it, you'll learn the ins and outs of AJAX development, including handling security issues. You'll also do some very cool stuff, such as make your own Google-style auto-suggest form and a drag-and-drop sortable list (and that's just two of the many fun things to learn in the book).

So, that said, you're now all equally warned and armed with all the knowledgeable resources I can think to throw at you. Let's get to it: how exactly do you go about getting something Ajaxy into your Joomla! site?

Joomla! extensions

Keep in mind, extensions are not part of your template. They are additional files with Joomla!-compatible PHP code, which are installed separately into their own directories in your Joomla! 1.5 installation. Once installed, they are available to be used with any template that is also installed in your Joomla! installation.

Even though these are not part of your template, you might have to prepare your template to be fully compatible with them. Some extensions may have their own stylesheets, which are installed in their extension directory. Once you've installed an extension, you may want to go into your own template's stylesheet so that it nicely displays XHTML objects and content that the extension may output into your site.

Extensions are any component, module or plugin that you install into your Joomla! 1.5 installation.

Components control content that displays in the main type="component" jdoc tag in your template. Note that components may also have module settings and the ability to display content in assigned module positions. The poll component is a good example of a component that also has module settings.

Modules are usually smaller and lighter and only display in module positions.

Plugins generally help you out more on the backend of your site, say to switch WYSIWYG editors or with enabling OpenID logins, but as we'll see, some plugins can affect the display of your site to users as well.

Deciding where AJAX is best used

On the whole, we're going to look at the most popular places where AJAX can really aid and enrich your site's user experience. We'll start with users adding comments to articles and pages and streamlining that process. We'll then take a look at a nice plugin that can enhance pagination for people reading long articles on your site.

We'll then move on to the RSS Reader module, which can enhance the content in your modules (and even makes your users have fun arranging them). Finally, we'll realize that AJAX isn't just for impressing your site users. You, as an administrator, can (and do) take advantage of AJAX as well.

Please note: These extensions were chosen by me based on the following criteria:

1. They provided some useful enhancement to a basic site.
2. They, at the time of this writing, were free and received very good feedback on Joomla!.org's extensions site: http://extensions.Joomla.org.

In the next few pages, I'll walk you through installing these extensions and discuss any interesting insights for doing so, and benefits of their enhancements (and some drawbacks). But you must use the extension links provided to make sure you download the latest stable versions of these extensions and follow the extension author's installation guides when installing these into your Joomla! site. If you run into any problems installing these extensions, please contact the extension's author for support. Always be sure to take the normal precaution of backing up your site before installation, at least for any non-stable extensions you may decide to try.

Installing the Joomla! comment component

Chances are, if you've invested in Joomla! 1.5 as your CMS, you need some powerful capabilities. Easy commenting with "captcha" images to reduce spam is always helpful:

http://extensions.Joomla.org/extensions/contacts-&-feedback/comments/4389/details

To install this extension (and the other few coming up), you have to basically go to Extensions | Install/Uninstall and upload the extension's ZIP file. You'll then proceed to the plugin, component, and/or modules panel and activate the extension so that it is ready to be implemented on your site.

Upon installing this comment component, to my surprise, it told me that it was for an older version of Joomla! Everything on the download page seemed to indicate it worked with 1.5. The installation error did mention that I just needed to activate the System Legacy plugin and it would work. So I did, and the comment form appeared on all my article pages. This may seem like a step backward, but for extensions like this, which are very useful, if they work well and stay stable in Legacy Mode, a developer may have made the decision to leave well enough alone. The developer will most likely eventually upgrade the extension (especially if Legacy Mode goes away in future versions of Joomla!). Just be sure to sign up for updates or check back on any extensions you use if you do upgrade your site. You should do this regardless of whether your extensions run natively or in Legacy Mode.

The advantage of AJAX in a comment form is that a user isn't distracted and comments post smoothly and right away (a bit of instant gratification for the user, even if you never "confirm" the post and it never gets actually published for other viewers). This extension outputs tables, but for the ease of handling robust comments and having a great admin area to manage them, I'll make do. The following screenshot shows the Joomla! comment component appearing in an article page:

AJAX/Dynamic Content and Interactive Forms in Joomla!

As you can see in my previous image, I have some strong styles that are trying to override the component's styles. A closer look at the output HTML will give me some class names and objects that I can target with CSS. The administration panel's Component | Joomla! Comment | Other Component settings page also allows quite a few customization options. The Layout tab also offers several included style sheets to select from as well as the option to copy the CSS sheet out to my template's directory (the component will do this automatically). This way, I can amend it with my own specific CSS, giving my comment form a better fit with my template's design.

AJAX/Dynamic Content and Interactive Forms in Joomla!

Installing the core design Ajax Pagebreak plugin

If your site has long articles that get broken down regularly in to three or more pages, Pagebreak is a nice plugin that uses Ajax to smoothly load the next page. It's a useful feature that will also leave your site users with a little "oh wow" expression.

http://www.greatJoomla.com/news/plugins/demo-core-design-ajaxpagebreak-plugin.html

After successfully installing this plugin, I headed over to the Extensions | Plugin Manager and activated it.

I then beefed out an article (with Lorem Ipsum) and added page breaks to it on the Home Page. It's hard to see in a screenshot, but it appears below the Prev and Next links without a full browser redraw. I've set my site up with SEO-friendly URLs, and this plugin does amend the URLs with a string; that is, http://yoururl.com/1.5dev/menu-item-4?start=1. I'm not sure how this will really affect the SEO "friendliness" value of my URL, but it does give me a specific URL to give to people if I want to send them to a targeted page, which is very good for accessibility. One thing to note, the first page of the article is the original URL; that is, http://yoururl.com/1.5dev/menu-item-4. The second page then appends ?start=1, the third page becomes ?start=2, and so on. Just be aware that when sending links out to people, it is always best to pull the URL directly from the site so that you know it's correct!

AJAX/Dynamic Content and Interactive Forms in Joomla!

Installing the AJAX RSS Reader Version 3 with Draggable Divs module

RSS feeds are a great way to bring together a wide variety of content as well as bring all your or your organization's "social network happenings" to one place in your own site. I like to use RSS feeds to get people interested in knowing what an organization is doing (or tweeting), or reading, and so on. Having links and lists of what's currently going on can compel users to link to you, join your group, follow you, and become a friend, a fan, or whatever.

This AJAX powered module has the extra feature of being draggable and somewhat editable. This is a nice way to draw a user in to the feeds and let them play with them and arrange the information to their taste. Sometimes, sorting and reorganizing makes you see connections and possibilities that you didn't see before. The next image may seem confusing, but it's a screenshot of the top div box being dragged and dropped: http://extensions.Joomla!.org/extensions/394/details

AJAX/Dynamic Content and Interactive Forms in Joomla!

AJAX: It's not just for your site's users

I've already mentioned, when applied properly, how AJAX can aid in interface usability. Joomla! attempts to take advantage of this within its Administration panel by enhancing it with relevant information and compressing multiple page forms into one single screen area. Here's a quick look at how Joomla! already uses AJAX to enhance its Administration panel forms:

The following image shows how the image uploader uses a "lightbox" div layer effect so that you can keep track of where you are in the content editor.

AJAX/Dynamic Content and Interactive Forms in Joomla!

In the next image, you can see how Joomla! helps keep the administration area cleared up by using smooth-sliding accordion panels. This helps you see everything on one page and have access to just what you need, when you need it.

AJAX/Dynamic Content and Interactive Forms in Joomla!

Joomla! 1.5 Template Design Create your own professional-quality templates with this fast, friendly guide
Published: June 2009
eBook Price: $26.99
Book Price: $44.99
See more
Select your format and quantity:

The AJAX factor

Aside from the many interface-enhancing, time-saving benefits of Ajax, sometimes you do just want to "wow" your site visitors. It's easy to give your site an Ajaxy feel, regardless of asynchronously updating it with server-side XML, just by sprucing up your interface with some snappy JavaScripts. The easiest way to get many of these effects is to reference a JavaScript library (sometimes called a toolkit or framework, depending on how robust the provider feels the code is). A few of the leading favorites in the AJAX community (in no particular order) are:

There're also:

Prototype is more of a framework and Script.alico.us is more of an add-on toolkit or set of libraries for neat effects. In fact, Script.alico.us references the Prototype framework, so your best bet is probably to use Script.alico.us, but if you do work with it, be sure to check out Prototype's site and try to understand what that framework does.

moo.fx is the smallest JavaScript effects library (boasting a 3k footprint), but again, it needs to be supported by the MooTools or Prototype frameworks.

jQuery is my personal favorite. It pretty much stands on its own without needing to be backed up by a more robust framework such as Prototype. Yet, you can still do some very robust things with it, such as manipulating data and the DOM. Plus, it's packed with the ability to do neat and cute visual effects similar to Script.alico.us or moo.fx.

Using JavaScript libraries such as the above, you'll be able to implement their features and effects with simple calls into your Joomla! posts and pages.

JavaScript component/plugin scripts

The fun doesn't stop there! What's that? You don't have time to go read up on how to use a JavaScript library such as jQuery? Never fear! There are many other JavaScript effect plugins that are built using the above libraries.

One of the most popular scripts out there that makes a big hit on any web site is Lightbox JS: http://www.huddletogether.com/projects/lightbox2/.

Lightbox JS is a simple, unobtrusive script used to overlay images on the current page. It's great, but it uses both the Prototype and Script.alico.us libraries to achieve its effects. Unfortunately, I've found Lightbox JS was a bit limited in terms of using it with a CMS that has a WYSIWYG editor like TinyMCE (although that didn't stop clients from wanting it on their site).

The problem

I had an issue with getting custom markup into my TinyMCE WYSIWYG editor. I then attempted to turn off the TinyMCE editor and found that even after using the plain text area editor, Joomla! modified my custom XHTML.

The same problem holds for Lightbox JS. While simple to add to your template, in order for Lightbox JS to work, you need to add a custom rel="lightbox" attribute to each <a href...tag that will call an image into the lightbox. While turning off the TinyMCE editor actually works here, and keeps the rel="lightbox" in tact after hitting Save, it only does so as long as the TinyMCE editor stays turned off.

This means: setting up quick Lightbox JS gallery images for clients in content pages only to have them constantly, inadvertently, mess them up and break them because they'd open up the content using their user logins, which, of course, are set to use the TinyMCE editor.

Upon loading the content from the database into the edit screen, TinyMCE likes to help out and do some cleaning up for you. That rel="lightbox" attribute in any links in the page sometimes drops out (and sometimes it stays; if you have several links to images, some may break and others may work). The client then calls me to fix the problem (upset, as they have to call me, and they thought they'd be the ones maintaining their own site).

While I'd like to get upset with my non-XHTML savvy clients, the truth is this is exactly the reason they've invested in the Joomla! CMS. They need an easy way to manage large sites with perhaps multiple editors, many of whom don't have the foggiest idea what an HTML tag is.

Enter jQuery lightBox

jQuery lightBox by Leandro Vieira Pinho is very similar to Lightbox JS in that it has that very nice, smooth animation. On the plus side, it uses only the jQuery library. On the plus plus side, it doesn't require any custom markup to your <a href... tags. You can download it from here:

http://leandrovieira.com/projects/jquery/lightbox/

Time for action: Adding jQuery to your template

This is an extremely easy-to-implement plugin. (Don't get confused, this is not a Joomla! plugin. jQuery refers to packaged scripts that use its library as plugins).

After downloading it, add the key .js and .css files inside your Joomla! template's <header> tags:

...
<script type="text/javascript" src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="<?php echo $this->baseurl;
?>/templates/go_green/js/jquery.js"></script>

<script type="text/javascript" src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="<?php echo $this->baseurl;
?>/templates/go_green/js/jquery.lightbox-0.5.js"></script>
...

You'll also add in a call to the jQuery lightBox CSS file:

...
<link rel="stylesheet" type="text/css" href="<?php echo $this->baseurl; ?
>/templates/go_green/css/jquery.lightbox-0.5.css" media="screen" />
...

Don't forget to upload the images in the ZIP package to your template's image directory and update the jquery.lightbox-0.5.js files image paths in line's 30 to 34:

...
imageLoading: 'templates/go_green/images/lightbox-ico-loading.gif',
// (string) Path and the name of the loading icon

imageBtnPrev: 'templates/go_green/images/lightbox-btn-prev.gif',
// (string) Path and the name of the prev button
image

imageBtnNext: 'templates/go_green/images/lightbox-btn-next.gif',
// (string) Path and the name of the next button image

imageBtnClose: 'templates/go_green/images/lightbox-btn-close.gif',
// (string) Path and the name of the close btn

imageBlank: 'templates/go_green/images/lightbox-blank.gif',
// (string) Path and the name of a blank image (one pixel)
...

Alternatively, you can upload the jQuery lightBox images into the images folder; that is, in the root of your Joomla! installation. You then won't need to edit the jquery.lightbox-0.5.js file. However, if you package your template up for other people to use, the images will not come over with your template and the script may appear broken.

Now, we're ready to activate the jQuery lightBox plugin. This is the beauty of jQuery. It has a robust DOM and CSS selector feature, and that means we don't have to put any special class or rel tags in our markup. We can generally target <a href links by placing a small jQuery JavaScript in our header (below our .js and .css file calls) like so:

...
<script type="text/javascript">
$(function() {
$('#page a').lightBox(); // Select all links in an XHTML area with
page ID
});
</script>
...

This will work for all our article pages

Now you can create an article or content page in your Administration panel using the easy method of creating an article and adding content to it.

I uploaded the images via Joomla's built-in image uploader, which you can find at the bottom of the content editor. I then inserted my thumbnail version into the page and created a link to the image using the link editor in TinyMCE's editing options.

AJAX/Dynamic Content and Interactive Forms in Joomla!

That's it!

But wait! Unfortunately, there's a small drawback: because I'm targeting the a href links inside the #page div, my PDF, print, and email buttons are activating the lightBox. As you can see by the following screenshot, the results are "interesting":

AJAX/Dynamic Content and Interactive Forms in Joomla!

This is easily remedied if you know a bit about jQuery's selectors.

First off, we'll simply target the area we want to focus in on a bit more:

$('#page p a').lightBox();

This will only activate a hrefs inside p (paragraph) tags. This doesn't fix our problem, as those button links happen to be wrapped inside paragraph tags too. However, they do have a class called .buttonheading associated with them. So, we'll select a href's inside p tags that do not contain the class .buttonheading, as follows:

$('#page p:not(.buttonheading) a').lightBox();

This is great. The PDF, print, and email buttons now work. But I know my clients. They're going to create articles, and using nothing but the WYSIWYG editor, with no clue as to what markup they're actually creating. They will not only upload images with links for the lightBox, but probably also will throw in a bunch of other links to other stuff that shouldn't kick off the lightBox. The nerve! They can be so "link-happy" sometimes. Well, that's OK too. We'll simply amend the a selector a bit:

$('#page p:not(.buttonheading) a:has(img)').lightBox();

By adding a:has(img), only the <a href... tags that wrap around images will activate the jQuery lightBox plugin.

You now have a fool-proof lightBoxing method that the most sloppy HTML mess-making WYSIWYGing editors will be hard pressed to break! The following image shows the lightbox at work in the template:

AJAX/Dynamic Content and Interactive Forms in Joomla!

jQuery selectors: In order to make jQuery lightBox work well with your template, you should to understand selectors. Karl Swedberg has two excellent articles on targeting anything you want with jQuery selectors: http://www.learningjquery.com/2006/12/how-to-getanything-you-want-part-2. You can also use jQuery's reference guide: http://docs.jquery.com/Selectors.
There's also jQuery's ThickBox: ThickBox installs and works very similar to jQuery lightBox. However, in addition to handling images similar to Lightbox JS, it can also handle in-line content, iFrame content, and AJAX content (be sure to check out the examples on the Thickbox page): http://jquery.com/demo/thickbox/.
The downside: ThickBox requires that you add a special class="thickbox" to your <a href tag markup. The good news is, TinyMCE doesn't strip this out, but you'll need to have content editors that know how to add that class to their content with the WYSIWYG editor turned off. ThickBox also doesn't do that "smooth" animation that jQuery lightbox does when images are different sizes. This is a trade-off I've made when I've occasionally decided it's important to be able to display more than just images in a layout design or Jooma! template.

Summary

In this article we reviewed a few ways to take advantage of AJAX on your Joomla! site. We downloaded and installed a handful of useful extensions and looked at using jQuery and jQuery lightBox to enhance post and page content.

Joomla! 1.5 Template Design Create your own professional-quality templates with this fast, friendly guide
Published: June 2009
eBook Price: $26.99
Book Price: $44.99
See more
Select your format and quantity:

About the Author :


Tessa Blakeley Silver

Tessa Blakeley Silver's background is in print design and traditional illustration. She evolved over the years into web and multi-media development, where she focuses on usability and interface design. Prior to starting her consulting and development company hyper3media (pronounced hyper-cube media) http://hyper3media.com, Tessa was the VP of Interactive Technologies at eHigherEducation, an online learning and technology company developing compelling multimedia simulations, interactions, and games that met online educational requirements like 508, AICC, and SCORM. She has also worked as a consultant and freelancer for J. Walter Thompson and The Diamond Trading Company (formerly known as DeBeers) and was a Design Specialist and Senior Associate for PricewaterhouseCoopers' East Region Marketing department. Tessa authors several design and web technology blogs. Joomla! Template Design is her first book.

Books From Packt

Drupal 6 Content Administration
Drupal 6 Content Administration

Choosing an Open Source CMS: Beginner's Guide
Choosing an Open Source CMS: Beginner's Guide

Joomla! E-Commerce with VirtueMart
Joomla! E-Commerce with VirtueMart

Plone 3 Theming
Plone 3 Theming

MODx Web Development
MODx Web Development

Magento: Beginner's Guide
Magento: Beginner's Guide

jQuery UI 1.6: The User Interface Library for jQuery
jQuery UI 1.6: The User Interface Library for jQuery

WordPress 2.7 Cookbook
WordPress 2.7 Cookbook

Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software