JQuery/Thymeleaf Lesson

• Question 1: jQuery - Dynamic Content Update
  • Student List
  • Student List

Question 1: jQuery - Dynamic Content Update

Objective: Use jQuery to dynamically update a p element with user input from an input field when a button is clicked.

```python

This text will be updated.

``` # Question 2: Thymeleaf - Displaying a List of Items Objective: Use Thymeleaf to display a list of students stored in a backend Java controller. Info you may need: - student.getStatus(): Returns True if the student passed, returns False if the student failed - student.getName(): Returns student name - student.getGrade(): Returns student grade ```python @Controller public class StudentController { @GetMapping("/students") public String getStudents(Model model) { List students = Arrays.asList( new Student("Jacob", 85, true), new Student("James", 45, false), new Student("Jason", 70, true), new Student("John", 50, false) ); model.addAttribute("students", students); return "students"; } } ``` ```python public class Student { private String name; private int grade; private boolean status; public Student(String name, int grade, boolean status) { this.name = name; this.grade = grade; this.status = status; } public String getName() { return name; } public int getGrade() { return grade; } public boolean getStatus() { return status; } } ``` ```python

Student List

Name	Grade	Status

```

Student List

Name	Grade	Status

# Bonus Question: Why is Thymeleaf better than creating a regular table? What are any potential pros and cons of Thymeleaf tables? Because it can pull data from the backend which can be very useful
We can use Spring Boot to link Thymeleaf and Backend controller
You don't have to hard code values
However you have to keep rerunning Spring Boot to see changes when you make changes to thymeleaf code