Course – LS – All

Get started with Spring and Spring Boot, through the Learn Spring course:

>> CHECK OUT THE COURSE

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 Inputon

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.

4. Conclusion

In this tutorial, 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.

As always, the code is available over on GitHub.

Course – LS – All

Get started with Spring and Spring Boot, through the Learn Spring course:

>> CHECK OUT THE COURSE
res – REST with Spring (eBook) (everywhere)
Comments are closed on this article!