feat(wip): refine examples

exaucae · exaucae · commit 26a8c0060a65 · 2022-06-17T19:58:12.000Z
diff --git a/spring-web-modules/spring-thymeleaf/src/main/java/com/baeldung/thymeleaf/controller/FunctionCallController.java b/spring-web-modules/spring-thymeleaf/src/main/java/com/baeldung/thymeleaf/controller/FunctionCallController.java
@@ -1,5 +1,6 @@
 package com.baeldung.thymeleaf.controller;
 
+import com.baeldung.thymeleaf.utils.StudentUtils;
 import org.springframework.stereotype.Controller;
 import org.springframework.ui.Model;
 import org.springframework.web.bind.annotation.RequestMapping;
@@ -10,7 +11,8 @@ public class FunctionCallController {
 
     @RequestMapping(value = "/function-call", method = RequestMethod.GET)
     public String getExampleHTML(Model model) {
-        model.addAttribute("num", 2);
+        model.addAttribute("totalStudents", StudentUtils.buildStudents().size());
+        model.addAttribute("student", StudentUtils.buildStudents().get(0));
         return "functionCall.html";
     }
 }
diff --git a/spring-web-modules/spring-thymeleaf/src/main/webapp/WEB-INF/js/functionCall.js b/spring-web-modules/spring-thymeleaf/src/main/webapp/WEB-INF/js/functionCall.js
@@ -0,0 +1,8 @@
+
+function greetWorld() {
+    alert("hello world")
+}
+
+function salute(name) {
+    alert("hello: " + name)
+}
diff --git a/spring-web-modules/spring-thymeleaf/src/main/webapp/WEB-INF/views/functionCall.html b/spring-web-modules/spring-thymeleaf/src/main/webapp/WEB-INF/views/functionCall.html
@@ -4,25 +4,23 @@
 <meta charset="UTF-8" />
 <title>Thymeleaf: Javascript function call</title>
 </head>
+<script type="text/javascript"
+        src="../js/functionCall.js">
+</script>
 <body>
     <header>
         <div> Thymeleaf: Javascript function call </div>
     </header>
-
     <main>
-        <section>
-            <div>Inline function call</div>
-            <div>
-                <header>Without a variable</header>
-                <button th:onclick="'alert(\'a\');'">Without variable</button>
-            </div>
-            <div>
-                <header>With a variable</header>
-                <button th:onclick="'alert(\'' + ${num} + '\');'">With variable</button>
-            </div>
+        <section class="flex-box">
+                <button th:onclick="greetWorld()">using no variable</button>
+                <button th:onclick="'alert(\' 1. static variable used here.\');'">using static variable</button>
+                <button th:onclick="'alert(\' '1. There are exactly  + ${totalStudents} +  students'\');'">using inline dynamic variable</button>
+                <button th:onclick="'javascript:alert(\''2. There are exactly  + ${totalStudents}  +  students'\');'">using javascript:function</button>
+                <button th:data-name="${student.name}" th:onclick="salute(this.getAttribute('data-name'))">using data attribute</button>
+                <button th:onclick="@{'salute(' + ${student.name} + ');'}">using @ tag</button>
+                <button th:onclick="salute([[${student.name}]])">using double brackets</button>
         </section>
     </main>
-
-
 </body>
 </html>

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,6 @@`
`1`	`1`	`package com.baeldung.thymeleaf.controller;`
`2`	`2`
	`3`	`+import com.baeldung.thymeleaf.utils.StudentUtils;`
`3`	`4`	`import org.springframework.stereotype.Controller;`
`4`	`5`	`import org.springframework.ui.Model;`
`5`	`6`	`import org.springframework.web.bind.annotation.RequestMapping;`
`@@ -10,7 +11,8 @@ public class FunctionCallController {`
`10`	`11`
`11`	`12`	`@RequestMapping(value = "/function-call", method = RequestMethod.GET)`
`12`	`13`	`public String getExampleHTML(Model model) {`
`13`		`- model.addAttribute("num", 2);`
	`14`	`+ model.addAttribute("totalStudents", StudentUtils.buildStudents().size());`
	`15`	`+ model.addAttribute("student", StudentUtils.buildStudents().get(0));`
`14`	`16`	`return "functionCall.html";`
`15`	`17`	`}`
`16`	`18`	`}`