Pass a variable from thymeleaf to a javascript function?

Question

I have an html file, thymeleaf, that has a variable passed from the controller that I need to give to a function on an external javascript file. How do I do this ?

I can get the variable like

<label th:utext="${id}" ></label>

I need to pass that id to a function that's inside

<script th:src="@{/js/myfunctions.js}" type="text/javascript"></script>

There's a function there :

function myFunction(id){

}

Solution 1

Inline HTML example:

th:onclick="${'myFunction(' + id + ');'}"

Solution 2

You can do something like this :

<input type="hidden" id="yourId" th:value="${id}"/>

Then in your js function :

function myFunction(){
 var val = $("#yourId").val();
}

Note that I use Jquery but the principe is the same.

If the JS function code is in your html page (not .js external file) you can access the model value like this :

function myFunction(){
  var val = "${id}";
}

Solution 3

Pass a variable like that:

<script th:inline="javascript"}">myFunction(/*[[${id}]]*/);</script>

Solution 4

try this: (a bit late to the party)

<script type="text/javascript" th:inline="javascript">

th:attr="onChange=|yourFunction(${id})|" </script>

View more solutions

Comments

[RK Shrestha]

do as th:onclick="myfunction('[[(${id})]]')"

[Mike D3ViD Tyson]

seems to be already answered here stackoverflow.com/a/25688291/6157415

[James Grey]

I cannot do like this var val = "${id}";

[Chris Sum]

how can assing to an external file without assign in the html a big json?

[p.k]

I have an use case where id needs to be resolved like '1234' (with the single quotes) any idea how that can be done.

[V H]

@p.k <span th:attr="onclick=${'doThis('+ '''' + user.getTestJquery() + '''' + ')'}">aaaa</span> should do it When I inspect element I see: <span onclick="doThis('presetValue')">aaaa</span>