Skip to content

Latest commit

 

History

History
26 lines (21 loc) · 1.44 KB

README.md

File metadata and controls

26 lines (21 loc) · 1.44 KB
Raw

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