HTML and CSS Reference
In-Depth Information
engine using the
findById
method. It will then be loaded into the form using the serializa-
tion plugin we wrote earlier in the topic:
$(taskPage).find('#tblTasks tbody').on('click', '.editRow',
function(evt) {
$(taskPage).find('#taskCreation' ).removeClass( 'not');
storageEngine.findById('task', $(evt.target ).data( ).taskId, function(task) {
$(taskPage).find('form').fromObject(task);
}, errorLogger);
}
);
With this in place, the existing
save
method can remain unchanged, since it was already de-
signed to handle updates. The task that is passed to the save method on an edit will contain
an
id
property, and therefore an update will be performed.
We do not have code in place however to update the table after the edit has occurred - the
current functionality will simply add a new row after the edit. We will therefore change it
to this:
$(taskPage).find('#saveTask').click(function(evt) {
evt.preventDefault();
if ($(taskPage).find('form').valid()) {
var task = $(taskPage).find('form').toObject();
storageEngine.save('task', task, function() {
$(taskPage).find('#tblTasks tbody' ).empty();
tasksController.loadTasks();
$(':input').val('');
$(taskPage).find('#taskCreation' ).addClass( 'not');
}, errorLogger);
}
});
This will now empty and recreate the tasks table when a task is saved. If there was going to
be a large number of tasks we would probably look at producing a more optimised imple-
mentation that simply updated the correct row, but it is best to start simple, and optimize if
required.
