3. Use
remove()
method on a MongoDB collection for deleting the respective contact
record from the
collection in the database. Upon successful deletion, the server should
send an empty response message back to the client; otherwise, it sends the error message
back to the client.
Step 2
: Open
externalJS.js
in the
./public/javascripts/
directory and add the following code
at the end of the file.
// Delete contact link click
$('#contactList table tbody').on('click', 'td a.linkDeleteContact', deleteContact);
// Delete Contact
function deleteContact(event) {
event.preventDefault();
// Pop up a confirmation dialog
var confirmation = confirm('Are you sure you want to delete this contact?');
// Check and make sure the contact confirmed
if (confirmation === true) {
// If confirmed, do our delete
var id = $(this).attr('rel');
$.ajax({
type: ?,
url: ?
}).done(function( response ) {
?
});
}
else {
// If saying no to the confirm, do nothing
return false;
}
};
Replace “?” with correct code to finish the client-side code for sending an AJAX HTTP DELETE
request and handling the response. You should follow these hints:
1.
$('#contactList table tbody').on('click', 'td a.linkDeleteContact', deleteContact);
captures
the click event on the
delete
link. This event will be processed by the
deleteContact
function.
2. You should fill in correct type and url of the HTTP DELETE request in the
$.ajax
method call.
3. Upon successful deletion, you should refresh the “Contact List” display on the web
page. If the detailed information of the contact deleted is displayed in the “Contact Info”
part, empty the detailed information there. If the deletion failed on the server side,
display the error message carried in the response using
alert()
.
Step 3
: Restart your Express app, browse
again, and test the delete
function as follows:

Fig. 8 After clicking “delete” in the row of “Jim”
Fig.9
After clicking “delete” in the row of “Jim”
(when Jim’s detailed info is not displayed
(when Jim’s detailed info is displayed in
in “Contact Info”)
“Contact Info”)
Fig. 10 After confirming deletion by clicking “OK” in both case (1) and case (2) above
Lab Exercise 7: Sort the Contacts
In this part, we implement the client-side code for sorting contacts displayed in the contact
list, when the “sort” in the contact list is clicked. Note that the “sort” is a link with click
event handler “sortList()”, as we have “
<a id='sort' onclick='sortList()'>sort</a>
” in
index.pug
. When the “sort” link is clicked for the first time, the contacts should be sorted
according to alphabetic order of their names; when “sort” is clicked again, the contacts
should be listed in reverse alphabetical order of their names; and the list shuffles between
alphabetic order and reverse alphabetical order when “sort” is clicked again and again.
Add and implement the following function in
externalJS.js
:
function sortList() {
//to complete
}
Hints
: you can directly sort the previously retrieved contacts array, using the Array sort
method
. You need a global variable to

remember whether you should sort the list into alphabetical order or reserve alphabetical
order each time.


You've reached the end of your free preview.
Want to read all 16 pages?
- Fall '13
- Dr. C. Wu