HTML5 and CSS3, Second Edition

having edited an existing one. We first add an event handler when the New

button is clicked:

html5_indexedDB/javascripts/notes.js

$("#new_button").click(function(event){

newNote();

});

Inside the handler we clear out the data-id attribute of the title field and remove

the values from the forms. We’ll also hide the Delete button from the interface.

html5_indexedDB/javascripts/notes.js

varnewNote=function(){

varnote= $("#note");

vartitle= $("#title");

$("#delete_button").hide();

title.removeAttr("data-id");

title.val("");

note.val("");

}

When a user clicks the Save button, we want to trigger code to either insert

a new record or update the existing one. We’ll use the same pattern as we

did before—we’ll start with the event handler for the Save button:

html5_indexedDB/javascripts/notes.js

$("#save_button").click(function(event){

varid, note,title;

event.preventDefault();

note= $("#note");

title= $("#title");

id = title.attr("data-id");

if(id){

updateNote(id,title.val(),note.val());

}else{

insertNote(title.val(),note.val());

}

});

This method checks the data-id attribute of the form’s Title field. If it has no

ID, the form assumes we’re inserting a new record and invokes the insertNote()

method, which we define next:

html5_indexedDB/javascripts/notes.js

varinsertNote=function(title,note){

vardata,key

data= {

Chapter 9. Saving Data on the Client • 198

Download from Wow! eBook <www.wowebook.com> report erratum • discuss