Following up on the previous post, we saw how important is to take care about our AJAX scripts to degrade gracefully. Today we will see how to do it in the practice using prototype.

We will take as example the e24Writer described on previous posts. The e24Writer gradually display a group of elements using a chained opacity transition, for that reason we need that those elements be hidden before the event run. For example if we going to animate the text “AJAX”, in the way that appear letter-by-letter. If we initially hide that text using the CSS display property setting it to none, then if due to any of the reasons described on the last post we don’t have javascript then the web won’t degrade gracefully because the text “AJAX” never will appear.

But if we initially leave the text visible then we will need to hide it before the page renders, to accomplish this we need an event that fires when we have total access to the DOM and before the page renders. That event is the “domReady”.

Some AJAX libraries like Mootools, YUI o ExtJs natively have the “domReady”event, Prototype don’t. But if we look on Google by the term “prototype domReady” then we will find some extensions like this one

Event.onDOMReady(function() {
  $('text').hide();
  oe24Writer = new e24Writer( 'text', { autostart: true, duration: 1.0, interval: 0.3 });
});

In this way the text can be read even when the javascript is disabled.

With each new browser’s version we found new programming features that let us make more advanced AJAX effects. Even when most of these improvements are present at the major browsers that are more standard every day, there are always many reasons to found different users configurations:

• Users that keep using old browser’s versions.
• Users that use less popular and less standard browsers.
• User that disable javascript or make other restrictions for security reasons.
• Search engine’s spiders that do not use to parse javascript and then some texts can leave hidden.
• Users with accessibility limitations that use other ways to read the pages.

In order to reach all these users we need that those pages that use javascript to make advanced AJAX effects gracefully degrade, that means that the page must be able to work even when javascript or another special features are disabled.

In the next post we will see a real case and how to solve it using Prototype.