About AJAX and JS disabled
16 Nov, 2009. Written by Tom Roggero
This isn't a tutorial, but a kind of recommendation about what to do when programming javascript animations and AJAX loadings for websites. Most of people have javascript enabled in their browsers, and most of potential javascript disabled visitors don't allow css (e.g.: WAP cell phones). So, it's a bit of accessibility feature just in case.
We probably had done some time a website with hidden divs that just appear when case is called.
Example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Simple Example</title> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.3.2");</script> <script type="text/javascript"> $(function(){ $("#btn_send").click(function(){ // after AJAX requesting -- $("#firstStep").hide(); $("#secondStep").show(); }); }); </script> </head> <body> <div id="box"> <div id="firstStep"> <h1>1 - Hey! Wanna chat?</h1> <form method="post" action=""> <fieldset> <label for="name">Name:</label> <input type="text" name="name" id="name" /> <label for="msg">Message:</label> <textarea name="msg" rows="10" cols="30" id="msg"></textarea> <input type="submit" id="btn_send" value="Send" /> </fieldset> </form> </div> <div id="secondStep" style="display:hidden;"> <h1>2- Thanks for messaging!</h1> Your message have been sent successfully. Because of your message, we have a <em>freebie code</em> for you: A5V2axT4 </div> </div> </body> </html>
It is just an example, but consider about a shopping cart, which has more than 2 simple steps and relevant information like a PayPal form. It wouldn't be nice for a user, which has JS disabled, to hide directly the step, because of two reasons: first, if the back-end isn't well done may be the form will never be completed; second, is really nasty to be loading pages every 3 fields.
So we decided to use a non-intrusive method, adding:
<!-- in head section -->
<script type="text/javascript">
/* <![CDATA[ */
document.write('
<style type="text/css">.hidden{display:none;}</style>
');
/* ]]> */
</script>
<!-- and then, for extra steps -->
<div id="extraStep" class="hidden"></div>
So when they have JS enabled, everything will look fine. And if they don't, we just display the DIV correctly.
--
But that's a kind of basic accessibility. I need to add something:
Because between steps the interaction is done by a button, that button shouldn't be displayed if JS disabled (because every field is showed in the same page, we won't need the NEXT button). How to achieve that?
Easy, see example code below:
<!-- for head section, jquery code -->
<style type="text/css">
/* if they have JS enabled we'll display it then */
.ajax { display:none; }
</style>
<script type="text/javascript">
$(function(){
$(".ajax").css("display", "block");
});
</script>
<!-- for every item add "ajax" class, e.g. -->
<input type="button" value="Next" name="gotoStep2" class="ajax" />
You can take (use) it or leave it. This is a recommendation, like having the telephone number on a business website in the beginning of header section. Blind people don't like waiting the reader robot 1 hour until they listen the number to call.
Another recommendation about usability: the site must work as we want. So never forget validating fields both on client side (javascript), AND assuring on server side (back-end, php, or whatever language you're programming). Any doubt, leave a comment. Hope you understand this article.
NOTE: the CDATA piece of code in scripts is to allow using html tags inside the script tag, and validating code.