How to put code thymeleaf in an external javascript file?

Question

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?

Community · Accepted Answer · 2017-05-23 12:33:11Z

12

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.

edited May 23, 2017 at 12:33

CommunityBot

11 silver badge

answered Nov 30, 2014 at 14:35

Manu Zi

2,3806 gold badges35 silver badges70 bronze badges

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

Comments

jpllosa · Accepted Answer · 2019-12-24 09:30:01Z

6

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.

answered Dec 24, 2019 at 9:30

jpllosa

2,2041 gold badge33 silver badges34 bronze badges

Comments

Pat · Accepted Answer · 2019-09-05 21:12:28Z

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!

Sidney Liu · Accepted Answer · 2021-05-18 10:57:05Z

4

Sure you can.

You can't put Thymeleaf template code in an external JavaScript file, but you can put JavaScript code in a pair of <script> tags in a html template, using a template fragment in the HTML.

Create a new HTML file 'gp-aprobarDocumento.html' in the /template folder, put your function in the script and replace /**/ with ".

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title></title>

    <script th:fragment="gp-aprobarDocumento">
        ventanaAprobacion = function(td)
        {
            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");
            });
        }
    </script>
</head>
<body>

</body>
</html>

And add a th:replace <script> tag in your html file.

<script th:replace="gp-aprobarDocumento :: gp-aprobarDocumento"></script>

edited May 18, 2021 at 10:57

answered May 18, 2021 at 10:47

Sidney Liu

5657 silver badges15 bronze badges

1 Comment

membersound Over a year ago

Great, exactly was looking for this. It works and should be the accepted answer for externalizing js into fragments.

Collectives™ on Stack Overflow

How to put code thymeleaf in an external javascript file?

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest