HTML5 and CSS3, Second Edition

This fires off the getNote() method, which takes in the ID and gets the single

note from the database. We define getNote() like this:

html5_indexedDB/javascripts/notes.js

vargetNote=function(id){

varrequest,store,transaction;

id = parseInt(id);

transaction= db.transaction(["notes"]);

store= transaction.objectStore("notes");

request= store.get(id);

request.onsuccess=function(event){

showNote(request.result);

};

request.onerror=function(error){

alert("Unableto fetchrecord"+ id);

};

}

This method looks a lot like the previous fetchNotes() method. We get a request

object by calling get() on the store, passing it the ID. When the request is suc-

cessful we display the note on the form by calling showNote(), which we define

like this:

html5_indexedDB/javascripts/notes.js

varshowNote=function(data){

varnote= $("#note");

vartitle= $("#title");

title.val(data.title);

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

note.val(data.note);

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

}

This method also activates the Delete button and embeds the ID of the record

into a custom data attribute so that updates can easily be handled. Our Save

button will check for the existence of the ID. If it exists, we’ll update the

record. If it’s missing, we’ll assume this is a new record. Let’s write that bit

of logic next.

Creating, Updating, and Deleting Records

Our system retrieves records and displays them, but we need to make it

possible to put notes into the system. Let’s start by activating the New button,

which clears the form out when clicked so a user can create a new note after

report erratum • discuss

Storing Data in a Client-Side Database Using IndexedDB • 197

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