Marcos Placona Blog

Programming, technology and the taming of the web.

Month: October 2010

Nifty jQuery tricks – Ajax Events

Reading time: 2 – 4 minutes

As previously mentioned on my other post, I’m working on improving usability and user experience within one of our applications.

This application has a somehow complex authentication system managed by Fusebox.

In one of our screens, we’ve replaced most of the page refreshes with ajax calls, so on the table of contents, the user can modify anything, and it gets saved automatically upon confirmation without the need for clicking buttons or reloading the page.

Our QA soon noticed that if during the process of browsing the page and updating something you got yourself logged out, the authentication system would kick off (as it runs per request), and the whole page would get a bit screwed.

An example of this would be:

Ajax Driven Page

When clicking on each of the tabs, they would trigger an Ajax call to a dynamic page that would return some HTML. this HTML would fill up the internal div and display the contents without refreshing.

Now, if while clients were viewing this page they decided to go for a cup of tea and clicked on a tab when they came back after 15 minutes, the following would occur:

Ajax Driven page screwing things up

That isn’t the right behaviour, as the browser is supposed to redirect the user to a login page, and not display this page inside the tabs. in this situation, no matter what the client do, clicking the tabs will always take them to the same screen, which could confuse them.

To get around this, I need to have some kind of hook that will check if the user is logged in before any Ajax requests are made.

Come jQuery to the rescue!

When using any of the Ajax capabilities available through jQuery, you can register a handler to be called when the  request begins.

This can be accomplished with ajaxStart(). it will kick off whenever you make an Ajax request, and in this case, it works a treat, as it will go through my authentication system, and redirect the page to the login screen should the user have been logged in.

A simple code sample for this would be:

$(this).ajaxStart(function() {
           url: 'index.cfm?fuseaction=c_common.islogged',
           success: function(data, event) {
             //check the results of the authentication page here

You can also use ajaxStop() for the exact same effect, but only getting triggered when the Ajax call is finished.

ColdFusion 9 Developer Tutorial – Book Review

Reading time: 2 – 2 minutes

Book reviewer Marcos Placona | Publisher: Packt | Author: John Farrar

The book starts with a very brief introduction to ColdFusion, and what the basic language capabilities are.

On chapter 1 – Web Pages – Static to Dynamic

The author begins by explaining what variables are for, and then moves into strings and scopes. He then moves into structures, loops, arrays , conditional processing through if’s and case statements, and explains some of the wonders on exception handling. This chapter is merely a run through around the CFML language, and will help programmers familiar with the technology to understand the conventions used by the book through the code samples.

Chapter 2 – Basic CFCs and Database Interaction

Things start to get a bit more exciting on chapter two, where the topic moves into CFC creation, some objects (beans), and a little bit of database interaction. I like how basic terminologies are described here, and pretty much every example is showed through tags and scripting.

The book uses a very simple product management system as example, and the examples show what a bean object is, and what it can be used for. I could see the author did not focus too much on explaining what object oriented programming is, but the concept is shown through the whole book.

In this chapter, some simple database interaction is demonstrated, and at around page 60, you are already writing full blown objects, which are database reliant, and give you the ability to encapsulate most of the logic.

Continue reading

Nifty jQuery tricks – Avoid Cache

Reading time: 2 – 2 minutes

I found this two function yesterday while working on one of our applications.

We are turning a very boring page into a full blown jQuery powered page. It’s got loads of functionalities being turned into Ajax calls to give the user a better experience. We are really taking usability into account, and minimizing things like page refresh or reloads is essential.

One thing that got to us, was the fact that IE8 insists in caching some Ajax contents when loading things too quickly (i.e. if a link is clicked, and a tab is clicked subsequently).

This is easily fixable by adding a timestamp to the request, so whenever a link is clicked, the request would be doing something like:

var tS=new Date().getTime();
    url: searcher,
    data: {timestamp:tS},
    type: 'GET',
    dataType: 'json',
    success: function(data) {
        //something here

The code above will do the job, but you have to remember to always use the timestamp, and pass it on.
Another better way of doing it, is by using the ajaxSetup function.

According to the documentation, ajaxSetup sets default values for future Ajax requests. So in other words, every Ajax request made after ajaxSetup will obey the directives defined by it.

One of this directives happens to be called “cache”, and if set to “false”, will make sure every Ajax request has the current timestamp appended to the URL. You can simply add it to your code as such:

$(document).ready(function() {
   $.ajaxSetup({ cache: false });
   // put all your jQuery goodness in here.

Now all of your requests will look like this:
There are also other settings that can be added inside ajaxSetup. They can be found on the jQuery.ajax() documentation, and all the settings listed in there will also work with ajaxSetup.
Hope this tip is useful to someone.