Step 1 Open usersjs in the routes directory and add the following middleware

Step 1 open usersjs in the routes directory and add

This preview shows page 10 - 14 out of 16 pages.

Step 1 : Open users.js in the ./routes directory and add the following middleware: /* * PUT to updateContact
Image of page 10
*/ router.put('/updateContact/:id', function (req, res) { var db = req.db; var collection = db.get('contactList'); var contactToUpdate = req.params.id; //TO DO: update the contact record in contactList collection, according to contactToUpdate and data included in the body of the HTTP request }); Implement the code in the above middleware, for updating an existing contact record in the contactList collection, whose “_id” is carried in the URL of the PUT request, and new contact information carried in request body. Hint : use collection.update() . Upon successful update, the server should send a response message back to the client with an empty body; 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 to update the contact record when an existing contact record is updated. // Update Contact function updateContact(existingContact) { var id = existingContact._id; $.ajax({ type: ?, url: ?, data: ?, dataType: 'JSON' }).done(function (response) { if (response.msg === '') { // Clear the form inputs ? // Update the table populateContactList(); //Update detailed info if the updated contact's detailed info is displayed ? } else { ? } }); }; Replace “?” with correct code to finish the client-side code for sending an AJAX HTTP PUT request and handling the response. Upon successful update, you should clear the form input on the web page; and if the detailed contact information of the updated contact is being
Image of page 11
displayed under “Contact Info”, update the contact info there. If an error message is carried in the response, prompt the error message using alert() . Step 3 : Restart your Express app, browse again, and test the update function as follows: Fig. 6 Input new information of Fig. 7 After clicking an existing contact “Add/Update Contact” on the Fig. 6 view Lab Exercise 6: Delete a ContactIn this part, we implement the server-side and client-side code for deleting a contact recordfrom the database, when a respective “delete” button in the contact list is clicked.Step 1: Open users.js in the ./routes directory and add the following middleware:/** DELETE to delete a contact.*/router.delete(?, function(req, res) {?});You should replace “?” with correct code for handling a delete request, by following thehints below:1. Among the code we added in Step 4 of Lab Exercise 2, the “_id” attribute of a contactrecord is saved to the “rel” attribute of a “<a>” element of class “linkDeleteContact”, i.e.,the “delete” link shown in the screenshots. The client will send an AJAX HTTP DELETErequest to the following URL once you click the “delete” button:(replace xx by the value of “_id” attribute of a contact record to be deleted).
Image of page 12
2. The middleware should handle HTTP DELETE requests for path /deleteContact/:id, and retrieve the “_id” attribute carried in a DELETE request through req.params.id .
Image of page 13
Image of page 14

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