How to inline JSON object into javascript with Thymeleaf

Question

I would like to use an autocomplete jquery component in my Thymeleaf template. The autocomplete function of Materializecss front-end framwork looks like this:

$('input.autocomplete').autocomplete({
    data: {
      "Apple": null,
      "Microsoft": null,
      "Google": 'http://placehold.it/250x250'
    },
    limit: 20, // The max amount of results that can be shown at once. Default: Infinity.
    onAutocomplete: function(val) {
      // Callback function when value is autcompleted.
    },
    minLength: 1, // The minimum length of the input for the autocomplete to start. Default: 1.
  });

As you can see I need a data object including the list of elements. I would like to embed this variable from server side as this list is a dynamic one. As the Thymeleaf documentation says

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

Based on the documentation the following example should work:

$('input.autocomplete').autocomplete({
        data: [[${companies}]],
        limit: 20, // The max amount of results that can be shown at once. Default: Infinity.
        onAutocomplete: function(val) {
          // Callback function when value is autcompleted.
        },
        minLength: 1, // The minimum length of the input for the autocomplete to start. Default: 1.
      });

The problem is that Thymeleaf does not inline anything in this case. Embedding serverside variables or command objects work fine with Thymeleaf but I can not make it work for javascript. I use Spring Boot 1.5.4, Thymeleaf 3.0.2

What do you mean when you say Thymeleaf does not inline anything in this case? Where is the js code going to be? In the template statically? — inoabrian
– inoabrian, Commented Jun 21, 2017 at 13:38

holmis83 · Accepted Answer · 2017-06-21 15:08:09Z

1

The th:inline="javascript" only works if your scripts are inline, that is in the HTML template between <script> and </script>.

If you have a separate javascript file and Thymeleaf expressions you want to evaluate in it, you need to process that js file through Thymeleaf separately using the JAVASCRIPT Template Mode.

answered Jun 21, 2017 at 15:08

holmis83

16.7k5 gold badges88 silver badges88 bronze badges

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

1 Comment

Roland Over a year ago

It sounds reasonable. Can you tell me how can I do that? I use Spring Boot and it's auto-configuration. The default template mode is HTML. How can I specify different template mode for the .js files? I also do not understand why javascript template mode is not the default for js files

Andre Hofmeister · Accepted Answer · 2017-11-20 07:21:12Z

0

$('input.autocomplete').autocomplete({
    data: [($ {
        companies
    })], // use  '(', ')'
    limit: 20,
    onAutocomplete: function(val) {},
    minLength: 1
});

Try the above code. I also experienced that.

edited Nov 20, 2017 at 7:21

Andre Hofmeister

3,45511 gold badges55 silver badges80 bronze badges

answered Nov 20, 2017 at 6:30

Tae-Yong Kim

11 silver badge2 bronze badges

1 Comment

Tae-Yong Kim Over a year ago

data: [ ( ${companies} ) ], /* unescape /, data: [ [ ${companies} ] ], / escape */ , Unescape and Escape Expression are different each other

Collectives™ on Stack Overflow

How to inline JSON object into javascript with Thymeleaf

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related