Variable expression into javascript without using th:inline

Question

I searched first but I found confusing answers since I'm new to Thymeleaf and amateurish at best at javascript.

I just want to know how to pass variable expressions into javascript functions, sort of like in JSP:

<a href="#" onclick="javascript:getContactId('${contact.id}');">Button</a>

Of course, this fails with Thymeleaf and passes the string ${contact.id} instead of its value, so how could I get the value of the variable expression instead?

The reason I want it this way is because it depends on the row which is being iterated by th:each.

If there's no other way except to use th:inline, then what's the best approach considering the above statement?

Nimchip · Accepted Answer · 2013-01-16 20:53:17Z

29

This one worked:

th:onclick="'javascript:getContactId(\'' + ${contact.id} + '\');'"

Thanks goes out to the thymeleaf forum: http://forum.thymeleaf.org/variable-expression-into-javascript-without-using-th-inline-td4025534.html

answered Jan 16, 2013 at 20:53

Nimchip

1,7357 gold badges25 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

demaniak Over a year ago

This works for me, with one parameter, but I can't (yet) see how that looks like with two parameters?

demaniak Over a year ago

Ah nevermind, got it! For (example) a fixed string param, the above will be th:onclick="'javascript:getContactId(\'someString\',\'' + ${contact.id} + '\');'" Cool, thanks!

David V · Accepted Answer · 2014-08-26 01:36:08Z

6

In Thymeleaf version 2.1, I have not been able to get the accepted answer to work. I did find some guidance from a Twitter post from Thymeleaf. Rather than using th:onclick, you use th:attr and specify the onclick attribute therein.

th:attr="onclick='javascript:getContactId(\'' + ${contact.id} + '\');'"

answered Aug 26, 2014 at 1:36

David V

11.7k5 gold badges46 silver badges70 bronze badges

1 Comment

pastafarian Over a year ago

Thank you thank you thank you! This is the only thing that worked for me. It is a bit annoying that the answer had to be found in a cryptic tweet! :-)

Archer · Accepted Answer · 2013-01-16 19:07:12Z

0

You can not put javascript variables into onclick or other DOM attributes. The value of onclick or any other DOM attribute should be a constant string.

However, you can dynamically modify value of onclick attribute from javascript, like this:

yourDomElement.onclick = anyVariable;

answered Jan 16, 2013 at 19:07

Archer

5,1379 gold badges58 silver badges98 bronze badges

9 Comments

Nimchip Over a year ago

what do you mean? this would be part of an <a> tag.

Archer Over a year ago

the part of <a> tag should be a constant string. Dynamically you can do that from inside <script language="javascript"> block

Nimchip Over a year ago

do you mean that I should not? Because this has worked for me in the past.

Nimchip Over a year ago

I'm calling an external function by its name, the whole function isn't there. Anyway this isn't part of my problem..

Archer Over a year ago

once agagin, value passed to onclick inside <a> element should be a constant string. You can not pass javascript variables there. To do so you should set value of yourDomElement.onclick from javascript.

|

user3029929 · Accepted Answer · 2014-02-13 06:37:18Z

0

You can do this like:

th:onclick="'javascript:getContactId(\'' + ${contact.id} + '\');'"

answered Feb 13, 2014 at 6:37

user3029929

4913 gold badges7 silver badges21 bronze badges

Comments

wi2ard · Accepted Answer · 2017-10-10 14:13:19Z

0

A more generic approach, if you need in JS something that isn't passed as a event handler parameter:

th:attr="data-myValueFromThymeleaf=${contact.id}"

Any attribute whose name is starting with data- is ignored by all browsers. So it won't affect the UI and you can easily read the value in javascript.

I prefer this because it's not ideal to put javascript code in html (see unobtrusive javascript)

answered Oct 10, 2017 at 14:13

wi2ard

1,59513 silver badges31 bronze badges

Comments

Jason Hapyer · Accepted Answer · 2018-11-25 01:42:37Z

0

I have asked the Thymeleaf project on twitter, and their answer is:

You can use both the "+" operator or literal substitutions. For example: <a th:href="|javascript:change('start','${taskId}')|">

For more info: https://www.thymeleaf.org/doc/articles/standarddialect5minutes.html

I have tried, and it works~

answered Nov 25, 2018 at 1:42

Jason Hapyer

256 bronze badges

Collectives™ on Stack Overflow

Variable expression into javascript without using th:inline

6 Answers 6

2 Comments

1 Comment

9 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

1 Comment

9 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related