Deleting Rows

To make our Delete buttons do something when clicked, we need to bind a click event handler to them with jQuery. We did the same sort of thing earlier with the items on the Date panel using jQuery's click() method.

Unfortunately, that approach won't work in this case. Unlike the items on the Dates panel, the entries on the Date panel are not static. This means they are added and removed throughout the course of the user's session. In fact, when the application launches, there are no entries visible on the Date panel at all. Therefore, we have nothing to bind the click to at launch.

The solution is to bind click events to the delete buttons as they are created by the refreshEntries() function. To do so, add the lines shown in bold to the end of the for loop:

newEntryRow.find('.calories').text(row.calories); newEntryRow.find('.delete').click(function(){ var clickedEntry = $(this).parent(); var clickedEntryId ='entryId'); deleteEntryById(clickedEntryId); clickedEntry.slideUp();

O The function begins by specifying that we are looking for any elements that have a class of delete inside of an element that has an ID of date, and calls the click() method on those elements. The click() method accepts the anonymous function that will handle the event as its only parameter.

© When the click handler is triggered, the parent of the Delete button (i.e., the li) is located and stored in the clickedEntry variable.

© This line sets the clickedEntryId variable to the value of the entryld we stored on the li element when the refreshEntries() function created it.

O This line passes the clicked ID into the deleteEntryById() function, and on the next line, jQuery's slideUp() method gracefully removes the li from the page.

Add the following deleteEntryById() function to kilo.js to remove the entry from the database:

function deleteEntryById(id) { db.transaction(

function(transaction) {

transaction.executeSql('DELETE FROM entries WHERE id=?;', [id], null, errorHandler);

As we've done in previous examples, we open a transaction, pass it a callback function with the transaction object as the parameter, and call the executeSql() method. We're passing in the SQL query and the ID of the clicked record as the first two arguments. The third argument is where the success handler would go, but we don't need one, so we just specify null. As the fourth argument, we specify the same error handler that we've been using all along.

And there you have it. It may have taken a lot of description to get to this point, but in reality we haven't had to write all that much code. In fact, kilo.js only contains about 100 lines of JavaScript (Example 5-1).

Example 5-1. The complete JavaScript listing for Kilo database interaction var jQT = $.jQTouch({ icon: 'kilo.png'

var db;


$('#createEntry form').submit(createEntry); $('#settings form').submit(saveSettings); $('#settings').bind('pageAnimationStart', loadSettings); $('#dates li a').click(function(){ var dayOffset =; var date = new Date(); date.setDate(date.getDate() - dayOffset); sessionStorage.currentDate = date.getMonth() + 1 + '/' +


var shortName = 'Kilo'; var version = '1.0'; var displayName = 'Kilo'; var maxSize = 65536;

db = openDatabase(shortName, version, displayName, maxSize); db.transaction(

function(transaction) { transaction.executeSql(


function loadSettings() {



function saveSettings() {

localStorage.age = $('#age').val(); localStorage.budget = $('#budget').val();

return false;

function createEntry() {

var date = sessionStorage.currentDate; var calories = $('#calories').val(); var food = $('#food').val(); db.transaction(

function(transaction) { transaction.executeSql(

'INSERT INTO entries (date, calories, food) VALUES (?, ?, ?);',

refreshEntries(); jQT.goBack();

}, errorHandler

return false;

function refreshEntries() {

var currentDate = sessionStorage.currentDate; $('#date hl').text(currentDate); $('#date ul li:gt(0)').remove(); db.transaction(

function(transaction) { transaction.executeSql(

'SELECT * FROM entries WHERE date = ? ORDER BY food;', [currentDate], function (transaction, result) {

for (var i=0; i < result.rows.length; i++) { var row = result.rows.item(i); var newEntryRow = $('#entryTemplate').clone(); newEntryRow.removeAttr('id'); newEntryRow.removeAttr('style');'entryId',; newEntryRow.appendTo('#date ul'); newEntryRow.find('.label').text(; newEntryRow.find('.calories').text(row.calories); newEntryRow.find('.delete').click(function(){ var clickedEntry = $(this).parent(); var clickedEntryld ='entryld'); deleteEntryById(clickedEntryId); clickedEntry.slideUp();

}, errorHandler

function deleteEntryById(id) { db.transaction(

function(transaction) {

transaction.executeSql('DELETE FROM entries WHERE id=?;', [id], null, errorHandler);

function errorHandler(transaction, error) {

alert('Oops. Error was '+error.message+' (Code '+error.code+')'); return true;

0 0

Post a comment