I try to use ajax with Thymeleaf, however I have faced some problems and I haven't solve it yet. My operation is try to send a parameter to controller than calculate it and display in same page into a label. My HTML code is
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<input type="text" name="Thing" value=""/>
<script th:inline="javascript">
window.onload = function () {
document.getElementsByName("Thing")[0].addEventListener('change', doThing);
function doThing(evt) {
var url = [[@{/
calculation
}
]]
;
$("#fill").load(url + '?input=' + evt.target.value);
}
}
</script>
<div id="fill">
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>In the html code, I use ajax and redirect it to controller with var url = [[@{/calculation} ]]. My controller.
@RequestMapping(value = "/calculation", method = RequestMethod.GET)
@ResponseBody
public int multiply(@RequestParam int input, Model model) {
return input;
}
With these operation I can calculate input and send it to my html. Than with ajax function, I capture it and send to . After that, I see my success result on the page. My problem is that, I want to send the input from controller to
<div id="fill"><p th:text="${amount}"/></div>And For it I need to change my controller of course like that.
@RequestMapping(value = "/calculation", method = RequestMethod.GET)
@ResponseBody
public String multiply(@RequestParam int input, Model model) {
model.addAttribute("amount",input);
return "test";
}
}
However, I couldn't write my input value to label with using of thmeleaf. The problem is when I do first operation, there is no problem, but if i want to assing the input value to a label or an input text, my operation is not working.
Could you help me please.
</div>
