20. December 2007, 11:30, by Vladimir Tišma

Graceful degradation of AJAX controls (Thank You Tube)

In many companies, management decides to setup a web proxy server to be able to control/disable the non-busines-related content. YouTube could probably be blamed for many hours spent doing non-business stuff.

Well, I use YouTube myself. Sometimes when taking a break and sometimes to listen to music that goes with the video, and you don’t have to watch it at all, but it’s probably the fastest way find and listen to a certain song if it’s available. Well, this time, YouTube will be a critical factor to finding the elegant solution.

To AJAX or not to AJAX

While working on the paginator component, I’ve spent quite a while figuring out how to be as DRY as possible and do it properly using MVC framework that is pretty new to me. Basically the component is supposed to render links with page numbers, and it already works somehow, so the actual task is to play with it until I’m satisfied with what I’ve produced in terms of quality of code.

The major challenge was to make use of AJAX where possible, i.e. page links should reload the pages if javascript is enabled in browser, and only single page content should be requested from server if AJAX is available.

So, there were the two cases, and anyone would probably be urged to build two functions: one that renders navigation that uses AJAX, and another to render plain links. Or even worse:

if($useAjax) {
//something;
} else {
//something else;
}

Idea! A client-side solution

After days of figuring out how to recognize if javascript is available on server side, and trying some suggested tricks and hacks, I noticed that due to turning off Javascript, YouTube complained that I “either have JavaScript turned off or an old version of Adobe’s Flash Player”.

Idea! Well of course. That’s the exact idea of javascript SWFObject, and I actually used SWFObject many times. Javascript object will update the DOM structure only if Javascript is available. The error message is there by default, and the movie is displayed using javascript, replacing the error message. So, why not just render the html content for our navigation, as if javascript was off? If javascript is on, we’ll traverse the dom and ajaxify the navigation. Of course – it worked.

Now it looks something like:



show $htmlPagination wherever suitable. have different style based on div id