(Bootstrap) card change + on click methods via thymeleaf
I’ve searched a lot, but I did not find the seemingly easy answer to the following problem:
I’m using Thymeleaf with Bootstrap, Spring boot and Java. It’s all about a status card of a plug. It shall show the state with the color (working) and update this by itself on an interval (seems to work), and be clickable to call the on off function (not working) What’s wrong? Please help me
HTML:
<div class="col-sm" id="checkIt" th:action="@{/controll}"> <div class="card text-white mb-3" th:classappend="${state} ? bg-success : bg-danger" style="max-width: 18rem;"> <div class="card-header">Plug</div> <div class="card-body"> <h5 class="card-title"> </h5> <p class="card-text">-> <a href="" class="stretched-link"></a></p> </div> </div> </div> <script> function updateStates() { $.get("state", function(fragment) { // get from controller $("#checkIt").replaceWith(fragment); // update snippet of page }); } setInterval(updateStates, 5000); </script> Java:
@RequestMapping(value="/state", method=RequestMethod.GET) public String getState(ModelMap map){ try { if (plug.readState() == 1) map.addAttribute("state", true); else map.addAttribute("state", false); } catch (IOException e) { e.printStackTrace(); } return "index :: #checkIt"; } @RequestMapping(value="/controll") @ResponseStatus(value = HttpStatus.OK) public void controllP() { try { if (plug.readState() == 1) plug.switchOff(); else plug.switchOn(); } catch (IOException e) { e.printStackTrace(); } } 
