AmI 2019 - Lab 7: Javascript Ajax Client

The goal of this exercise is to design and implement a front-end (in Javascript, Bootstrap, and jQuery) able to exploit the a set of REST APIs for the todo list manager (developed in Lab 6).

Exercise steps:

1. See the index.html template: it already gives a (static) example page
2. Attach an event handler to the "+" button, to insert a new task:
   • collect task name and urgency
   • call the REST POST /tasks service to add the new task
   • use $.ajax to send the JSON description of the new task
3. Before testing, modify Lab6 to enable CORS (cross-domain) requests, and deploy the two applications (server and front-end) on different ports
4. Generate the table by querying the REST server for all current tasks.
   • empty the current table
   • use $.ajax for calling the GET /tasks API
   • use the returned value to re-construct the table
   • ensure that the table is reloaded (1) at startup, (2) when a task is added
5. Enable the delete function for existing tasks
   • register an event handler on the delete icon
   • find the task ID corresponding to the row (suggestion: use data-xxx HTML5 attributes, and $.data('xxx') jQuery function for retrieving them)
   • use $.ajax to call the DELETE /tasks/id API (ensure that CORS allows DELETE)
6. Enable the edit function for existing tasks

Solution

The solution for all points is in the solution branch