How We're Using JQuery in ArticleLive NX 1.8
By Eddie Machaalani
Introduction
At Interspire we're always aiming for maximum code re-use between projects. For example, if SendStudio (our email marketing platform) contains a class to import subscribers, we will (and did, this week) take that class and use it in StoreSuite (our upcoming eCommerce platform) for importing product and customer details.
We not only focus on reusing PHP code, but also JavaScript code. Over the last few weeks we've been actively involved in switching a lot of our JavaScript code for form validation, AJAX, etc over to JQuery.
If you haven't heard about JQuery then read this quick description from JQuery.com:
jQuery is a fast, concise, JavaScript Library that simplifies how you traverse HTML documents, handle events, perform animations, and add Ajax interactions to your web pages. jQuery is designed to change the way that you write JavaScript.
JQuery is completely free and can be downloaded from JQuery.com. The main JQuery file is around 25KB compressed, and there are also optional add-on libraries that I will talk about soon.
In this article I'm going to show you real examples of how we're using JQuery in one of our upcoming product releases - ArticleLive NX 1.8. We specifically chose JQuery because of its extensive documentation and many of our developers were already familiar with JQuery prior to implementation.
Before moving on you should take a few minutes to learn the basics of JQuery, otherwise this article wont make much sense. This article is a great starting point.
Code Example #1 - Templates in ArticleLive
Jordie Bodlay (our lead ArticleLive developer) and I have spent a significant amount of time over the last week redesigning the templating system in ArticleLive. Here's how you chose a template before our changes:
... and here's how ArticleLive NX 1.8 will look when it's released shortly:
As you can see, all templates are shown on the page which makes it easier to choose one for your site. When you click on a template it is enabled and set as the template for your site, without any page refresh. Watch a quick example video here.
Here's the JQuery code we use to implement the template change via AJAX:
function SelectTemplate(TemplateID, template, color){
objAjax.newRequest("SelectTemplateReturn",[TemplateID]);
objAjax.setSendData("w", 'selecttemplate');
objAjax.setSendData("template", template);
objAjax.setSendData("color", color);
objAjax.post();
}
Compared to a typical AJAX request, JQuery uses around 20% of the code and makes the function more readable, meaning implementation across our other application is easier.
Code Example #2 - Template Previews in ArticleLive
With JQuery, the need to use popup windows to display image previews or any other type of information becomes redundant. JQuery's "thickbox" allows you to display what resembles a popup window, without actually opening a new window.
For example, when I click on the "Show Larger Preview" link, as shown in this screenshot:
... instead of opening a larger preview image in a new window, ArticleLive now uses JQuery's thickbox feature to display an inline preview, like this:
You can simply click the close link at the bottom or press the "Esc" key on your keyboard to hide the preview image. The implementation code for something like this built from scratch would be somewhere between 50 and 100 lines of code, factoring in cross-browser support, various screen resolutions, etc.
First we need to include the thickbox JavaScript file, which you can download here:
<script type="text/javascript" src="script/thickbox-compressed.js"></script>
... and here's the JQuery code:
<a href='http://beta/articlelive/dev/templates/Default/Previews/fixed_green.jpg' class="thickbox">
<img width="10" hspace="3" height="11" border="0" src="images/magnify.gif"/>Show Larger Preview
</a>
I've bolded the JQuery portion of the code for your convenience. It's simply one class called "thickbox" and JQuery handles the rest. Watch a quick example video here.
Conclusion
As you can see by the two examples included in this article, JQuery makes client-side techniques easier and faster to implement, and also leads to less code, which means less debugging and a faster product release.
As I mentioned earlier we're in the process of replacing a lot of our existing JavaScript code (specifically form validation and AJAX calls) with JQuery, and if you're working on a project for a client which is dependant on client-side functionality then JQuery is definitely worth a look.
ArticleLive NX 1.8 is currently under internal testing and will be released with a whole heap of new features shortly. Keep an eye on our site over the coming days as we'll be posting a complete feature list. Existing customers will be able to download ArticleLive NX 1.8 from the client area as soon as it's publicly released.
