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 + ');'}"

Answer 3

try this: (a bit late to the party)

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

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

Answer 4

Pass a variable like that:

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

Answer 5

This is an example:

//for parameter
function myfunction ([[${id}]]){
    //this is for address rout 
    window.location=[[@{/user}]]
}

use [[]] and put thymleaf expression