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:
- Large screens (e.g., desktops): The webpage should display a single row with four cells.
- Medium screens (e.g., tablets): The last two cells should move to a new row.
- 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:
- Add a dropdown menu with a list of countries and a "Load Data" button.
- When the button is clicked, distinct countries from students array shall be loaded into option list.
- When a country is selected, display the filtered list of students from the selected country in Cell 2.
Cell 2:
- Show the student list in a table. The table should have the following columns:
- Name
- Gender
- City
- Actions (with "Update" and "Delete" links).
- When the Delete link is clicked, remove the corresponding row from the students collection and update the table as well.
- When the Update link is clicked, load the selected student’s data in a form in Cell 3.
Cell 3:
- 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.
- After the user updates the form and clicks the Submit button, that student information shall be updated in Cell 1 and Cell 2.
Comments
Post a Comment