2

Let's say you have a HTML5 template file which includes an external javascript file. for example:

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <title>Reading List</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <link rel="stylesheet" type="text/css" media="all"
        href="/css/style.css" th:href="@{/css/style.css}"/>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script th:src="@{|/js/selectionCreation.js?v=${#dates.createNow()}|}"></script>

There are two controllers - html controller and javascript controller, html controller provides module attributes for rendering html template, the javascript controller supposes to provide module attributes to javascript. However the javascript also needs to use the module attributes provided by html controller. If I moved the javascript inside the html file(inline javascript); in html file, something like:

<script>
    var showtext = "[[${readingListObject.course.Id}]]";
    console.log(showtext);
</script>

There is no problem, but if I move the script out to a separate external javascript file, how does the external javascript access the module attributes provided by the html controller? Is there a way that javascript controller exchange module attributes with html controller? I use Spring Boot 1.5.10, Thymeleaf 3.0.9.

Mahozad
  • 18,032
  • 13
  • 118
  • 133
Kim Huang
  • 53
  • 1
  • 5

1 Answers1

3

You can use the variables that are declared inside the <script></script> tag (inline) in the external js file. just refer the external js file in your html

<script>
var showtext = "[[${readingListObject.course.Id}]]";
</script>

Then in your external script you can access the showtext variable. So you can use an inline js inside your html to only pass the attributes, then you can do your logic inside external js using the variables.

UPDATE :-

    <script>
        //Your in line code here, declare var and assign your   model   attribute
 </script>

Then just below this line, put your link to your external JS file.

<script th:src="source to your external JS">
</script>
abdul
  • 1,531
  • 1
  • 14
  • 29
  • 1
    Tried, doesn't work. the "showtext" is undefined in the external js file after it is assigned the value by the inline script in the html file . Thanks. – Kim Huang Mar 22 '18 at 16:36
  • put the inline script tag just above the external js – abdul Mar 22 '18 at 16:50
  • Thanks for helping, can you elaborate a little bit more? I tried your solution, doesn't work. – Kim Huang Mar 22 '18 at 18:17
  • I'm currently using this method in my project and it's working fine. Can you try putting your inline JavaScript code and external JavaScript file just before closing the body tag. before `

    `. Let me know if this didn't work

     – abdul Mar 22 '18 at 18:56
  • Then the external JavaScript file is not external JavaScript file anymore. They are all inline. – Kim Huang Mar 22 '18 at 20:04
  • I think you misunderstood me, I tried to explain it a bit more by updating the answer. Take a look at it and let me know – abdul Mar 22 '18 at 20:22
  • Thanks, worked after I put the external JavaScript file link just before the closing body tag. – Kim Huang Mar 22 '18 at 22:46
  • but i'm using the fragment i collected all js files in it. I need to inject model attr data into this regarding external js file. – sopehl May 11 '20 at 14:18
  • Any idea how you would modify this to work if you have set the Content Security Policy to script-src: 'self'? – Lewis Munene May 26 '21 at 15:02