In a Spring MVC application I have a model with a List type attribute. The model is bound to a HTML form and rendered by Thymeleaf. The goal is to be able to add or remove items from the list and to submit the form with modified list. All of that with and without JavaScript.
There are few solutions for this problem available on the internet but none of those which I found was clean and simple enough. There has been some request interceptors, List interface custom implementations, etc.
The idea behind this solution is simple. In a controller there are four endpoints. Two are used for rendering and "saving" the model. Two for adding and removing items from the list. Later two can be invoked as a standard HTTP request or as an Ajax request. This will ensure that solution will work with or without JavaScript enabled.
| @Controller | |
| class OrderController { | |
| private static final String AJAX_HEADER_NAME = "X-Requested-With"; | |
| private static final String AJAX_HEADER_VALUE = "XMLHttpRequest"; | |
| @GetMapping(path = {"/order", "/order/{id}"}) | |
| public String showOrder(@PathVariable(required = false) Long id, Model model) { | |
| Order order = orderService.load(); | |
| model.addAttribute(order); | |
| return "order"; | |
| } | |
| // Request is accepted by the endpoint only if contains "save" parameter. | |
| @PostMapping(params = "save", path = {"/order", "/order/{id}"}) | |
| public String saveOrder(Order order) { | |
| orderService.save(order); | |
| return "order"; | |
| } | |
| @PostMapping(params = "addItem", path = {"/order", "/order/{id}"}) | |
| public String addOrder(Order order, HttpServletRequest request) { | |
| order.items.add(new Item()); | |
| if (AJAX_HEADER_VALUE.equals(request.getHeader(AJAX_HEADER_NAME))) { | |
| // It is an Ajax request, render only #items fragment of the page. | |
| return "order::#items"; | |
| } else { | |
| // It is a standard HTTP request, render whole page. | |
| return "order"; | |
| } | |
| } | |
| // "removeItem" parameter contains index of a item that will be removed. | |
| @PostMapping(params = "removeItem", path = {"/order", "/order/{id}"}) | |
| public String removeOrder(Order order, @RequestParam("removeItem") int index, HttpServletRequest request) { | |
| order.items.remove(index); | |
| if (AJAX_HEADER_VALUE.equals(request.getHeader(AJAX_HEADER_NAME))) { | |
| return "order::#items"; | |
| } else { | |
| return "order"; | |
| } | |
| } | |
| public static class Order { | |
| private Date date; // Just some field. | |
| private List<Item> items; | |
| // Getters and setters are omitted. | |
| } | |
| public static class Item { | |
| private String name; | |
| // Getters and setters are omitted. | |
| } | |
| } |
Thanks to Thymeleaf's fragments there is only one template needed. By default, on an HTTP request all endpoints returns whole page. If Ajax request is sent, smaller part of the page containing the list will be returned.
| <form th:object="${order}" method="post"> | |
| <label for="date">Date</label> | |
| <input th:field="*{date}"> | |
| <fieldset id="items"> | |
| <div th:each=", stat : ${order.items}"> | |
| <label th:for="|order.items[${stat.index}].name|">Name</label> | |
| <!-- This construct will render field name like this: "items[0].name" --> | |
| <input th:field="${order.items[__${stat.index}__].name}"> | |
| <button type="button" name="removeItem" th:value="${stat.index}">Remove item</button> | |
| </div> | |
| </fieldset> | |
| <button type="button" name="addItem">Add item</button> | |
| <input type="submit" name="save" value="Save"> | |
| </form> |
Ability to not to re-render whole page on every HTTP request makes user experience more seamless. Following jQuery snippet will a) call the endpoints for adding or removing inems from list and b) replace #items fragment by returned content.
| // jQuery | |
| function replaceItems (html) { | |
| // Replace the <fieldset id="items"> with a new one returned by server. | |
| $('#items').replaceWith($(html)); | |
| } | |
| $('button[name="addItem"]').click(function (event) { | |
| event.preventDefault(); | |
| var data = $('form').serialize(); | |
| // Add parameter "addItem" to POSTed form data. Button's name and value is | |
| // POSTed only when clicked. Since "event.preventDefault();" prevents from | |
| // actual clicking the button, following line will add parameter to form | |
| // data. | |
| data += 'addItem'; | |
| $.post('/order', data, replaceItems); | |
| }); | |
| $('button[name="removeItem"]').click(function (event) { | |
| event.preventDefault(); | |
| var data = $('form').serialize(); | |
| // Add parameter and index of item that is going to be removed. | |
| data += 'removeItem=' + $(this).val(); | |
| $.post('/order', data, replaceItems); | |
| }); |
