Spring Boot / Thymeleaf: Fragments via Ajax
This is probably not the best approach and you guys can feel free to correct me in the comments section, but here is a simple tutorial on how I’m getting my fragments loaded via ajax.
Same as before, the full project is on my Github: https://github.com/mtrojahn/spring-thymeleaf-fragments-from-ajax
Let’s get to it:
MyController.groovy
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
@Controller class MyController { @GetMapping(['/', '/index.html']) def index(Model model) { 'index' } @GetMapping('/frag1') def frag1(Model model) { model.addAttribute("content", "hello") "fragments/frag1 :: content" } @GetMapping('/frag2') def frag2(Model model) { model.addAttribute("content", "world") "fragments/frag2 :: content" } } |
Very simple controller. Nothing special except for the fact it’s returning Thymeleaf fragmets from /resources/templates/fragments. As you probably noticed, for the sake of this example, each fragment is recieving it’s “content” from the controller.
Here’s a fragment: frag1.html
1 2 3 |
<th:block th:fragment="content" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"> <div th:text="${content}"></div> </th:block> |
Now the index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"/> <title>Title</title> <script src="webjars/jquery/3.1.0/jquery.js"></script> </head> <body> <button id="bt1">Load Fragment 1</button> <button id="bt2">Load Fragment 2</button> <div id="content"></div> <script> /*<![CDATA[*/ $("#bt1").on("click", function () { $("#content").load("/frag1"); }); $("#bt2").on("click", function () { $("#content").load("/frag2"); }); /*]]>*/ </script> </body> </html> |
Each button has it’s event and is calling a different method on the controller. The method then returns the corresponding fragment that will be loaded on the content div.
Pretty simple, huh?
