VARIABLE JAVASCRIPT RESOLVER EXPRESSION (on external .js file)

[SylvainAssemat]

Hello

I just try to have a simple mechanism using javascript and read "variable" from controller java model (springboot)
When i use th:insert, it works. All the content of the .js files is well available in the HTML file
But
When i try via th:src, the behaviour is not the same,displaying "null"

Inside the common.js, i can log the variable.

let activeProfile = /*[[ ${activeProfile} ]]*/ null;
console.debug('ACTIVE PROFILE     : ', activeProfile);

    <script th:inline="javascript"            th:src="@{/js/common.js}"></script>


    <!-- <script th:inline="javascript">
        /*<![CDATA[*/
        /*[+ [# th:insert="~{../static/js/common.js}"       /] +]*/
        /*]]>*/
    </script> -->

I try to have the same behaviour but seems not possible ?

I think that when i use one or more th:insert process, i am on the same thread, so the model atttibute is "global" to all the .js file i insert.
When i use th:src i will be on a isolated thread for each .js requested... so individual model.addAttribute("","") has to be done ...
That's why it seems not working unfortunately

Have a nice end of day

[danielfernandez]

th:src on a <script> tag simply sets the src attribute on the rendered HTML, causing the browser to load that file as a separate HTTP request. At that point, the file is served statically — there is no Thymeleaf processing involved, no Spring request context, and no model available. This is, unless you have your application configured to serve *.js files also as Thymeleaf templates.

th:insert works differently: it includes the contents of the referenced template into the current template during Thymeleaf's processing phase, which is why the model variables are available there.

If you want to pass server-side values to an external JavaScript file, the standard approach is to render those values inline in the HTML page itself (either in a <script> block or as data-* attributes), and then read them from your external JS file:

<script th:inline="javascript">
    const activeProfile = /*[[${activeProfile}]]*/ null;
</script>
<script src="/js/common.js"></script>

Your common.js can then read activeProfile as a global variable. This is not a Thymeleaf limitation — it is simply how browsers and HTTP work.