HTML5 and CSS3, Second Edition

With the link added, we need to modify our script. We want to hide the link

to the edit page and enable the Ajax support only if we have support for

editable content. The detection is relatively simple and doesn’t need Modernizr

at all. We just need to see if there’s a contenteditable attribute on an element.

html5_content_editable/javascripts/edit.js

➤ varhasContentEditableSupport=function(){

➤ return(document.getElementById("edit_profile_link").contentEditable!= null)

};

if(hasContentEditableSupport()){

➤

➤

➤

➤ $("#edit_profile_link").hide();

varstatus= $("#status");

$("span[contenteditable]").blur(function(){

varfield= $(this).attr("id");

varvalue= $(this).text();

varresourceURL= $(this).closest("ul").attr("data-url");

$.ajax({

url:resourceURL,

dataType:"json",

method:"PUT",

data:field+"="+ value,

success:function(data){

status.html("Therecordwas saved.");

},

error:function(data){

status.html("Therecordfailedto save.");

}

});

});

➤ }

With that in place, our users have the ability to employ a standard interface

or a quicker “in-place” mode. Just remember to implement the fallback

interface. Browsers that don’t understand contenteditable will ignore it (as they

will many other HTML5 features), leaving your users unable to work with

your site.

3.1 The Future

Right now, if you add a JavaScript-based date picker to your site, your users

have to learn how it works. If you’ve ever shopped online for plane tickets and

made hotel reservations, you’re already familiar with the different ways people

implement custom form controls on sites. It’s akin to using an ATM—the

interface is often different enough to slow you down.

report erratum • discuss

The Future • 65

Download from Wow! eBook <www.wowebook.com>