Thymeleaf: Only variable expressions returning numbers or booleans are allowed in this context

Question

I have a SpringBoot 2.1.4.RELEASE RESTful Web Service app., using Spring Initializer, embedded Tomcat, Thymeleaf template engine, and package as an executable JAR file.

I have this piece of code in one of my templates,

<tr th:each="menuPriceSummary: ${menus}" >  

...

    <a href="#" th:onclick="|changeAIColor('idAwesomeIconFAV${menuPriceSummary.menu.symbol}');| + 'performAjaxCall(\'' + @{/allmenupricesummary/switchfav/{id}(id=${menuPriceSummary.menu.symbol})} + '\');'" >              
        <span th:if="${menuPriceSummary.favorited}">
            <i th:id="'idAwesomeIconFAV'+${menuPriceSummary.menu.symbol}"  class="fa fa-toggle-on fa-lg" style="color:#009900; text-align: center;" aria-hidden="true"></i>
        </span>
        <span th:if="${!menuPriceSummary.favorited}">
            <i th:id="'idAwesomeIconFAV'+${menuPriceSummary.menu.symbol}" class="fa fa-toggle-off fa-lg"  style="color:#e6e6e6;" aria-hidden="true"></i>
        </span>
    </a>
</tr>

But I got this error when rendering the template:

org.thymeleaf.exceptions.TemplateProcessingException: Only variable expressions returning numbers or booleans are allowed in this context, any other datatypes are not trusted in the context of this expression, including Strings or any other object that could be rendered as a text literal. A typical case is HTML attributes for event handlers (e.g. "onload"), in which textual data from variables should better be output to "data-*" attributes and then read from the event handler.

Answer 1

You have to move your Thymeleaf expressions to th:data-* attributes, and use this.getAttribute('...') instead. Something like this for example:

<tr th:each="menuPriceSummary: ${menus}" >  
    <a  href="#"
        th:data-icon="|idAwesomeIconFAV${menuPriceSummary.menu.symbol}|"
        th:data-url="@{/allmenupricesummary/switchfav/{id}(id=${menuPriceSummary.menu.symbol})}"
        onclick="changeAIColor(this.getAttribute('data-icon')); performAjaxCall(this.getAttribute('data-url'));">
        <span th:if="${menuPriceSummary.favorited}">
            <i th:id="'idAwesomeIconFAV'+${menuPriceSummary.menu.symbol}"  class="fa fa-toggle-on fa-lg" style="color:#009900; text-align: center;" aria-hidden="true"></i>
        </span>

        <span th:if="${!menuPriceSummary.favorited}">
            <i th:id="'idAwesomeIconFAV'+${menuPriceSummary.menu.symbol}" class="fa fa-toggle-off fa-lg"  style="color:#e6e6e6;" aria-hidden="true"></i>
        </span>
    </a>
</tr>

Answer 2

You can use like bellow

<div th:each="file: ${files}">
   <input type="button"  th:data-parameter1="${file.id}"  th:data-parameter2="${file.name}  th:onclick="passValue(this.getAttribute('data-parameter1'),this.getAttribute('data-parameter2'))" />
</div>

In javaScript user

function test(id,name){
        
    }