3 Use remove method on a MongoDB collection for deleting the respective contact

3 use remove method on a mongodb collection for

This preview shows page 13 - 16 out of 16 pages.

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:
Image of page 13
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
Image of page 14
remember whether you should sort the list into alphabetical order or reserve alphabetical order each time.
Image of page 15
Image of page 16

You've reached the end of your free preview.

Want to read all 16 pages?

  • Fall '13
  • Dr. C. Wu

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture