Replace with the correct code to finish the client side code for sending an

Replace with the correct code to finish the client

This preview shows page 5 - 8 out of 9 pages.

Replace “?” with the correct code to finish the client-side code for sending an AJAX HTTP POST request for addcommodity. Recall that the end point is handled by the following middleware in ./routes/users.js. /* * POST to add commodity */ router.post('/addcommodity', function (req, res) { var db = req.db; var collection = db.get('commodities'); //insert new commodity document collection.insert(req.body, function (err, result) { res.send( (err === null) ? { msg: '' } : { msg: err } ); }); }); Add the following three directives in the text <input> element and <select> elements in index.htmlfor Name, Category and Status, respectively. The ng-model directives bind values of the input and select elements with the variables in the new_commodity object. ng-model="new_commodity.name" ng-model="new_commodity.category" ng-model="new_commodity.status" Add the following directive in the “AddCommodity<button> element, to register addNewCommodity () as the event handler for “ng-click” on the button.
Image of page 5
Restart your Express app and browse again. Add information of a new commodity. After cl icking the “Add Commodity ” button, you should see a page as in the figure below. Fig. 3 Task 5 : Now we implement the code for deleting a commodity from the database, when a respective “delete” button in the Commodity List is clicked. Recall that delete is handled by the following middleware in . /routes/users.js : /* * DELETE to delete a commodity. */ router.delete('/deletecommodity/:id', function (req, res) { var db = req.db; var collection = db.get('commodities'); var commodityToDelete = req.params.id; collection.remove({'_id': commodityToDelete}, function (err, result) { res.send( (err === null) ? { msg: '' } : { msg: err } ); }); }); In externalJS.js , add the following code: $scope.deleteCommodity = function(id){ var url = ?; $http.?.then(function(response){ ? }, function(response){ alert("Error deleting commodity:"+response.statusText); }); }; Replace “?” with correct code to complete the client -side code for sending an AJAX HTTP DELETE request and handling the response. Your implementation should achieve the following: upon successful deletion, you should refresh the “ Commodity List” displayed on
Image of page 6
the web page; otherwise, display the error message. Restart your Express app, browse again, and test the delete function as follows: Fig. 4 After deleting the “lenovo” commodity Task 6: Now we implement the code for updating the status of an existing commodity in the database. Recall that status update is handled by the following middleware in . /routes/users.js : /* * PUT to update a commodity (status) */ router.put('/updatecommodity/:id', function (req, res) { var db = req.db; var collection = db.get('commodities'); var commodityToUpdate = req.params.id;
Image of page 7
Image of page 8

You've reached the end of your free preview.

Want to read all 9 pages?

  • Fall '13
  • Dr. C. Wu
  • World Wide Web, HTTP

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture