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){

}

Answer 1

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}";
}

Answer 2

Inline HTML example:

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