Javascript function call with Thymeleaf

Question

I need to call a javascript function on thymeleaf template, something like this:

Case 1:

<select th:onclick="${'function1('a')'}">

But in this case the thymeleaf not work.. some researchs ago (including stackoverflow) I get the followings "solutions":

Case 2:

<select th:onclick="${'function1(''a'')'}">

Case 3:

<select th:onclick="${'function1(\'a\')'}">

Case 4:

<select th:onclick="${'function1(\''+'a'+'\')'}">

But in all cases I get the same error: "...Exception evaluating SpringEL expression..."

My problem is about javascript callings, I need put some parameters ${var} for call in js function. How I can fix that ?

Thanks

score 54 · Accepted Answer · edited Dec 25 '22 at 08:50

54

If you don't need any dynamic vars in the JS function call, this is how to do it:

th:onclick="'alert(\'a\');'"

This simply escapes the single quotes and requires no SpringEL (of course you could dispense with the thymeleaf attribute in this case and just use plain onclick).

To insert vars into it:

th:onclick="'alert(\'' + ${myVar} + '\');'"

Used the alert function to allow me to try it out and prove it works.

edited Dec 25 '22 at 08:50

starball

20,030
7
43
238

answered Oct 23 '14 at 13:35

Tom Bunting

1,845
16
24

1

Thanks, this concept works for me, i did use: th:attr="onchange='javascript:addAttr(\''+${poi.id}+'\', this.value)'" – f4root Oct 24 '14 at 08:55

score 8 · Answer 2 · answered Oct 27 '14 at 11:40

8

You need to call the javascript function as mentioned below.

th:onclick="'javascript:function1(\''+ ${a} +'\');'"

I think this could help you.

answered Oct 27 '14 at 11:40

Newbie

1,403
2
13
22

how to send if it has two values inside function? – rajadilipkolli Jul 07 '16 at 09:43

score 6 · Answer 3 · answered May 29 '19 at 08:22

As far as I know, you have two possibilities how to do it:

Using double brackets

<body th:onload="showToast([[${toast}]])">
...
</body>

And then JS function like this

function showToast(toast) {
    M.toast({html: toast});
}

Using data- attribute

<body th:data-toast="${toast}" th:onload="showToast()">
...
</body>

And appropriate JS function

function showToast() {
    var toast = document.querySelectorAll('body')[0].getAttribute('data-toast');
    M.toast({html: toast});
}

score 3 · Answer 4 · answered Jan 27 '16 at 10:37

3

Try this.

th:onclick="${'javascript:functionXXX(' + obj.id + ')'}"

answered Jan 27 '16 at 10:37

Tinily

37
4

score 2 · Answer 5 · answered Nov 25 '19 at 08:28

2

Another "new" way with html5, using data attributes:

th:data-url="@{/yourUrl}" th:onclick="window.location.href=this.getAttribute('data-url')"

answered Nov 25 '19 at 08:28

Jorge.V

1,329
1
13
19

score 1 · Answer 6 · answered May 11 '18 at 04:02

Sending two values in JS:

function openGate(IP,Port) {
   // Some operations with parameters IP and Port
}


<button id="open" type="button" th:onclick="'openGate(\'' +${gate.gateIp} +'\',\''+${gate.gatePort}+'\')'"  class="btn btn-warning">Open the gate</button>

In thymeleaf onclick we are using quotas for parameters. So the sourse page looks

<button id="open" type="button" onclick="openGate('192.168.10.10','9938')"  class="btn btn-warning">Open gate</button>

rjcdz04 · Answer 7 · 2019-03-19T19:12:00.927

1

One way is use the characters [[' y ']].

For example I am going to show the content of the variable 'startDate' which is a Date type and formatting in the format dd/MM/yyyy HH:mm:ss' to show using 'alert' function.

<input type="button" th:onclick="alert([[${#dates.format(processInstance.startDate, 'dd/MM/yyyy HH:mm:ss')}]]);" />

The output is like this:

22/02/2019 15:43:02

edited Mar 19 '19 at 19:12

answered Mar 19 '19 at 18:48

rjcdz04

23
5

score 1 · Answer 8 · 2021-06-21T09:05:39.633

There are situations in which we could prefer writing expressions directly into our HTML texts. It comes handy while our goal is to write variables directly into a javascript function.

Expressions between [[...]] or [(...)] are considered inlined expressions in Thymeleaf, and inside them we can use any kind of expression that would also be valid in a th:text.

A quick example if you want to call javascript function1 that alert the 'a' variable.

<script>

function function1(a){
      alert(a);
}

</script>

Then in thymeleaf you can call :
<button th:onclick="javascript:function1([[${a}]]);">Send</button>

These informations you can find in Thymeleaf documentation at 12.1 Expression inlining section or there is a good article with a lot of usefull examples at baeldung.com/spring-thymeleaf-css-js.

score 1 · Answer 9 · answered Mar 14 '21 at 16:41

1

i did this way:

<td><a href="#" th:onclick="@{'deletetag(' + ${tag.id} + ');'}"><i class="nav-icon fas fa-trash"></i></a></td>

And the deletetag function inside a simple <script></script>

answered Mar 14 '21 at 16:41

Hinotori

552
6
15

score 0 · Answer 10 · answered Sep 21 '21 at 11:02

Hi i was having the same issue, the problem that i got is that the function is not defined because my function was in the thymleaf file i have used <button th:onclick="javascript:function1()">Send</button> and i used also solutions mentioned above but didn't work for me so i have coppied almost all of my JavaScript functions in a separate JS file which is located at <project_name>/src/main/resources/public/js/main.js

and then in my thymleaf file i linked it like this <script type="text/javascript" th:src="@{/js/main.js}" src="../static/js/main.js"></script>

and i called my function like this : <input type="checkbox" onclick="function1()" th:onclick="|function1()|">Show Password and it worked just fine

Javascript function call with Thymeleaf

10 Answers10

Linked