CODEWITHSUNDEEP
htmlspring-bootspring-mvcthymeleaf
carles xuriguera
carles xuriguera

Reputation: 980

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

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.

Upvotes: 13

Views: 12044

Answers (2)

Enamul Haque
Enamul Haque

Reputation: 5063

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){
        
    }

Upvotes: 6

Metroids
Metroids

Reputation: 20497

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>

Upvotes: 26

Related Questions