AJAX and DOM Manipulation - Fetch, Display, Update and Remove Students Records

Make use of JQuery JavaScript library for AJAX functionality and DOM manipulaiton. Use Bootstrap for layout design.

Responsive Design:

  1. Large screens (e.g., desktops): The webpage should display a single row with four cells.
  2. Medium screens (e.g., tablets): The last two cells should move to a new row.
  3. Small and extra-small screens (e.g., phones): All cells should stack vertically.

Cell Details and Functionality:

Fetch student data from http://192.155.90.208/students.json using AJAX and store in students array. Make use of this array for below given functionalities. You can treat, student name as primary key.

Cell 1:

  1. Add a dropdown menu with a list of countries and a "Load Data" button.
  2. When the button is clicked, distinct countries from students array shall be loaded into option list.
  3. When a country is selected, display the filtered list of students from the selected country in Cell 2. 

Cell 2:

  1. Show the student list in a table. The table should have the following columns:
    1. Name
    2. Gender
    3. City
    4. Actions (with "Update" and "Delete" links).
  2. When the Delete link is clicked, remove the corresponding row from the students collection and update the table as well.
  3. When the Update link is clicked, load the selected student’s data in a form in Cell 3.

Cell 3:

  1. Display a form populated with the selected student’s information. Use input type text and radio for name and gender. and option lists for city and countries. When user select a country, her cities shall be loaded into cities option list.
  2. After the user updates the form and clicks the Submit button, that student information shall be updated in Cell 1 and Cell 2.

Comments