I have an external javascript file which is declared in my html file with the following tag:
<script type="text/javascript" th:inline="javascript" th:src="@{/js/gp-aprobarDocumento.js}"></script>
and in gp-aprobarDocumento.js the code shown below:
ventanaAprobacion = function(td)
{
/*<![CDATA[*/
idEntregable = $(td).attr("data-row-id");
idVersion = $(td).attr("data-row-version");
alert("la siguiente viene con el texto dle properties");
alert(/*[[${link.menu.page-certificacion-qa-bandeja-entrada}]]*/);
$(function() {
$("#dialog-aprobar-documento").dialog("open");
});
/*]]>*/
}
Thus when executed the function the window alert is shown empty.
Does somebody know how to put thymeleaf expression in a external javascript?
I think what you want to do it's not possible, I have a similar question (here:How do you access a model attribute with javascript variable)
but in your case you can do something like the this:
in html:
<script type="text/javascript" th:inline="javascript" >
var alertVariable = ${link.menu.page-certificacion-qa-bandeja-entrada};
</script>
and in the javascript the following:
ventanaAprobacion = function(td)
{
...
alert(alertVariable);
...
}
I know that's not really what you want but I have the same problem and I don't think there is any solution.
Via DOM:
https://datatables.net/examples/data_sources/js_array.html
If you're looking to create a JS variable from a Thymeleaf object you can add said object to the DOM. I recently did a project where I returned query results to a Java object of type List<> and added that object to the DOM through my Spring Controller.
//Deliver Results Array to the DOM
model.addAttribute("myResult", myResult);
After this object is added to your Thymleaf template model you can access it in your HTML as
th:text="${myResult}"
You can also reference it in your Javascript by simply referencing the name of the model object from the DOM. I haven't been able to get the variable to populate in the seperate JS file without making it global in scope from the HTML file with:
<script th:inline="javascript">
var myResult = [[${myResult}]];
</script>
My JS file looks like this
$(function(){
//Get Thymeleaf DOM Object
console.log(myResult);
});
Returning Result from DOM
Th object in question must be reference-able from within the DOM. You may have better performance with AJAX and creating a controller that returns the data to the client over HTTP. Seems like thymeleaf 3 has other solutions as well : https://github.com/thymeleaf/thymeleaf/issues/395
Hope this helps!
This worked for me. In my index.html:
<script th:inline="javascript">
/* variable used by index.js */
var referenceId = [[${referenceId}]];
</script>
<script type="text/javascript" th:src="@{/js/index.js}">
</script>
then in my index.js:
function doSomething() {
$.ajax({
type: 'GET',
url: '/api/' + referenceId ,
contentType: 'application/json',
beforeSend: beforeSend
})
}
Hope this helps.
