Spring MVC + Thymeleaf update options without submitting the form

Question

I'm building an HTML form that contains 2 select element option lists. The contents of the second list depend upon the value chosen from the first: the values are loaded from a database when the option checkbox is selected.

So I created an Employee model object:

@AllArgsConstructor
@Data // for getters and setters
public class EmployeeModel {
    List<Department> departments = List.of(Department.values());
    Department department; // selected department
    Set<Employee> employees = new TreeSet<>();
    Employee employee; // selected employee
}

Defined the corresponding form markup in EmployeeForm.html :

//html meta and other stuff...
<form th:action="@{/employee/create}" th:object="${employeeModel}" method="post">
    <label for="department">Department</label>
        <select id="department" name="department" th:field="*{department}">
            <option
                    th:each="department: *{departments}"
                    th:value="${department}"
                    th:text="${department.getName()}"></option>
        </select><br>

        <label for="employee">Employee</label>
        <select id="employee" name="employee" th:field="*{employee}">
            <option
                    th:each="employee: *{employees}"
                    th:value="${employee}"
                    th:text="${employee.getFullName()}"></option>
        </select><br>
   </form>

Implemented a Controller with the following 2 methods:

@GetMapping()
public ModelAndView showPage() {
    // VIEW_URL is "EmployeeForm" to point to the view template
    return new ModelAndView(VIEW_URL, Map.of("employeeModel", new EmployeeModel()));
}

@PostMapping(value = "create")
public ModelAndView createEmployee(@ModelAttribute("employeeModel") EmployeeModel model) {
    // extract data and save employee to database...
}

And the Controller holds a reference to EmployeeService , which provides the method:

    getEmployeeByDepartment(Department department)

that is used to update the select element option values.

But now I am stuck on updating the model and repopulating the form because I'm not sure how to trigger the necessary update on the "departments" select element.

My first idea would be to use jQuery to define an onChange event listener callback for the value of the checkbox. Is there some other way to handle this in Spring ?

Technologies in use:

• Java version "10.0.1" 2018-04-17
• spring-boot-starter-web
• spring-boot-starter-thymeleaf
• spring-boot-starter-data-jpa

If further information is required, please feel free to ask-

Answer 1

The best and the clean way to do it is to make an AJAX call to load employee options when a department is selected ( onChange event). I believe you are already using jQuery. So, AJAX using jQuery is easy.

This link should give you a head up: http://www.rockhoppertech.com/blog/spring-mvc-3-cascading-selects-using-jquery/

I am not sure which version of jQuery you are using but this link will give you a fair understanding on how to do it.