JavaScript Function Call with Thymeleaf

1. Overview

In this tutorial, we’re going to call JavaScript functions in a  Thymeleaf template.

We’ll start by setting up our dependencies. Then, we’ll add our Spring Controller and Thymeleaf template. Finally, we’ll showcase ways to call a JavaScript function based on its inputs.

2. Setup

In order to use Thymeleaf in our application, let’s add the Thymeleaf Spring 5 dependency to our Maven configuration:

<dependency>
    <groupId>org.thymeleaf</groupId>
    <artifactId>thymeleaf-spring5</artifactId>
    <version>3.1.2.RELEASE</version>
</dependency>

Then, let’s add this to our Spring controller based on our Student model:

@Controller
public class FunctionCallController {

    @RequestMapping(value = "/function-call", method = RequestMethod.GET)
    public String getExampleHTML(Model model) {
        model.addAttribute("totalStudents", StudentUtils.buildStudents().size());
        model.addAttribute("student", StudentUtils.buildStudents().get(0));
        return "functionCall.html";
    }
}

Finally, we add these two JavaScript functions to our functionCall.html template under src/main/webapp/WEB-INF/views:

<script  th:inline="javascript">
    function greetWorld() {
        alert("hello world")
    }

    function salute(name) {
        alert("hello: " + name)
    }
</script>

We’ll use those two functions to illustrate our examples in the next section below.

If there’s any trouble, we can always check how to add JavaScript to Thymeleaf.

3. Calling JavaScript Functions Inside Thymeleaf

3.1. Using Functions With No Input

Here’s how we’d call our greetWorld function above:

<button th:onclick="greetWorld()">using no variable</button>

It works for any custom or built-in JavaScript function.

3.2. Using Functions With Static Input

If we don’t need any dynamic variable in the JavaScript function, this is how to call it:

<button th:onclick="'alert(\'static variable used here.\');'">using static variable</button>

This escapes the single quotes and requires no SpringEL.

3.3. Using Functions With Dynamic Input

There are four manners to call a JavaScript function with variables.

The first way to insert a variable is to use inline variables:

<button th:onclick="'alert(\'There are exactly '  + ${totalStudents} +  ' students\');'">using inline dynamic variable</button>

Another option is by calling the javascript:function:

<button th:onclick="'javascript:alert(\'There are exactly ' + ${totalStudents} + ' students\');'">using javascript:function</button>

The third way is to use data attributes:

<button th:data-name="${student.name}" th:onclick="salute(this.getAttribute('data-name'))">using data attribute</button>

This method comes in handy when calling JavaScript events, like onClick and onLoad.

Finally, we can call our salute function with double-square-brackets syntax:

<button th:onclick="salute([[${student.name}]])">using double brackets</button>

Expressions between double square–brackets are considered inlined expressions in Thymeleaf. That’s why we can use any kind of expression that would also be valid in a th:text attribute.

3.4. Using the onClick Attribute With Thymeleaf 3

When using Thymeleaf 3, a common scenario is embedding Thymeleaf variables directly within the onClick attribute to dynamically pass data from the server-side model to JavaScript functions. We can achieve this using Thymeleaf’s th:attr or directly in the onClick attribute.

For example, let’s pass a dynamic variable to the JavaScript function myFunction():

<button th:attr="onclick='salute([[${student.name}]])'">Click to greet student</button>

In this example, th:attr dynamically generates the onClick attribute. The expression [[${student.name}]] is evaluated by Thymeleaf, and the result is inserted into the salute() function.

4. Setting JavaScript Variable From Spring Model

Furthermore, we can initialize a JavaScript variable using a Spring model by enabling JavaScript inline mode. To enable JavaScript inline mode, we can add the th:inline=”javascript” attribute to the <script> tag.

We have already declared a <script> tag with the inline mode attribute in our project setup. Let’s assign the totalStudent value to a JavaScript variable:

<script  th:inline="javascript">
    // ....
    let total = [[${totalStudents}]]

    function totalstudent() {
        alert("total students: " + total)
    }
</script>

In the code above, we declare a JavaScript variable named total and assign it the value of totalStudents from the model as set by the controller. We achieved this by declaring a Thymeleaf expression with the model name from the controller class – [[${totalStudents}]]. The expression is evaluated, and the result is assigned to the total.

We can use a single square bracket in our expression – [${totalStudents}]. However, this should be done carefully as it may result in unexpected behavior, especially in the case of String type.

Moreover, we can improve the expression for static loading (loading the script without the server) by adding a comment and setting a default value:

let total = /*[[${totalStudents}]]*/ '50';

Here, the expression is inside a comment, and the default value is set after the comment. Until the Thymeleaf expression is evaluated, it’s ignored for the default. Once it’s evaluated, the default value is replaced. This prevents errors in the script when loaded statically.

Notably, in the Thymeleaf version before 3.0, we need to wrap our script within the CDATA section to prevent parsing errors with inline expressions:

/*<![CDATA[*/

    let total = /*[[${totalStudents}]]*/ 'default value';
    //...

/*]]>*/

The code above ensures compatibility with XML parsers in an older version of Thymeleaf.

5. Conclusion

In this article, we learned how to call JavaScript functions in a Thymeleaf template. We started by setting up our dependencies. Then, we constructed our controller and template. Finally, we explored ways to call any JavaScript function inside Thymeleaf.