There is a table with data in the UI that can be edited by several users. How to update the table for all users when data changes? Those. send event from server to update table. Any examples like this? Do I need to use AJAX / JavaScript or is there enough thymeleaf?
Controller:
@Controller public class BalanceRecordController { final static Logger logger = Logger.getLogger(ErrorController.class); @Autowired private UserService userService; @Autowired private BalanceService balanceService; @RequestMapping(value = {"/home", "/login", "/"}) public String index(Map<String, Object> map) { map.put("balanceRecord", new BalanceRecord()); map.put("balanceRecordList", balanceService.balanceRecordList(userService.getCurrentUser())); return "index"; } @RequestMapping(value = "/add", method = RequestMethod.POST) public String addBalanceRecord(@ModelAttribute("balanceRecord") BalanceRecord balanceRecord, BindingResult result) { balanceRecord.setUser(userService.getCurrentUser()); balanceService.addBalanceRecord(balanceRecord); logger.info("BalanceRecord #".join(balanceRecord.getId().toString()).join(" was created")); return "redirect:/"; } @RequestMapping(value = "/delete/{balanceRecordId}", method = RequestMethod.POST) public String deleteBalanceRecord(@PathVariable("balanceRecordId") Long balanceRecordId) { balanceService.removeBalanceRecord(balanceRecordId); logger.info("Balance record #".join(balanceRecordId.toString()).join(" was deleted")); return "redirect:/"; } } UI Thymeleaf
<table class="table table-bordered table-striped"> <thead> <tr> <th>Date</th> <th>Category</th> <th>Title</th> <th>Type</th> <th>Value</th> <th> </th> </tr> </thead> <tbody> <if th:if="${not #lists.isEmpty(balanceRecordList)}"> <tr th:each="balanceRecord : ${balanceRecordList}"> <td type="text" th:text="${balanceRecord.date != null} ? ${#calendars.format(balanceRecord.date, 'dd.MM.yyyy')} : null"></td> <td th:text="${balanceRecord.category}"></td> <td th:text="${balanceRecord.title}"></td> <td th:text="${balanceRecord.sign}"></td> <td type="number" th:text="${balanceRecord.value}"></td> <td> <form action="#" method="post" th:action="@{/delete/__${balanceRecord.id}__}"> <input type="submit" class="btn btn-danger btn-mini" value="Delete"/> </form> </td> </tr> </if> <tr> <form action="#" method="post" th:action="@{/add}" th:object="${balanceRecord}" class="form-vertical"> <td><input type="date" th:field="*{date}" /></td> <td><input type="text" th:field="*{category}" /></td> <td><input type="text" th:field="*{title}" /></td> <td> <select th:field="*{sign}"> <option value="COST">COST</option> <option value="INCOME">INCOME</option> </select> </td> <td><input type="number" th:field="*{value}" /></td> <td><input type="submit" value="Add balance record" class="btn"/></td> </form> </tr> </tbody> </table> 