Thymeleaf can't find my variable when passing JavaScript literal to th:onclick

Question

I am trying to use a JavaScript function on my Thymeleaf template which uses a Thymeleaf variable, like this:

 <div th:object="${orderBy}">
        <form method="get" th:action="@{/}">
            <fieldset id="ordenacao">
                <legend>Ordenar</legend>
                <select th:name="orderBy">
                    <option th:each="orderBy : ${T(br.com.teste.segware.util.OrderTypes).values()}"
                    th:value="${orderBy}" th:text="${orderBy.displayValue}" ></option>
                </select> <br/> <br/>
                <input id="orderButton" th:onclick="'javascript:enableBtn(\'' + ${orderBy.displayValue} + '\');'"
                type="submit" value="Ordenar">
            </fieldset>
        </form>
    </div> 

The variable is an option from this Enum (Which uses Lombok to generate the getter):

@Getter
public enum OrderTypes {
    SELECIONE("Selecione..."),
    RECENTES("Recentes Primeiro"),
    ANTIGAS("Antigas Primeiro"),
    MAISUP("Mais Upvotes"),
    MENOSUP("Menos Upvotes");

    private final String displayValue;

    private OrderTypes(String displayValue) {
        this.displayValue = displayValue;
    }

}

The options from the menu with th:each appears correctly in the rendered HTML as a dropdown select/option menu.

But, when I use the same variable that renders as a JavaScript parameter to te method, I get the following error:

Caused by: org.thymeleaf.exceptions.TemplateProcessingException: Exception evaluating SpringEL expression: "orderBy.displayValue" (template: "index" - line 43, col 36) at org.thymeleaf.spring5.expression.SPELVariableExpressionEvaluator.evaluate(SPELVariableExpressionEvaluator.java:290) at org.thymeleaf.standard.expression.VariableExpression.executeVariableExpression(VariableExpression.java:166) at org.thymeleaf.standard.expression.SimpleExpression.executeSimple(SimpleExpression.java:66) at org.thymeleaf.standard.expression.Expression.execute(Expression.java:109) at org.thymeleaf.standard.expression.AdditionExpression.executeAddition(AdditionExpression.java:96) at org.ZDB38BD6F666CEF7A2F938F3 92EB71FDAZ.standard.expression.ComplexExpression.executeComplex(ComplexExpression.java:62) at org.thymeleaf.standard.expression.Expression.execute(Expression.java:112) at org.thymeleaf.standard.expression.AdditionExpression.executeAddition(AdditionExpression.java:89) at org.thymeleaf.standard.expression.ComplexExpression.executeComplex(ComplexExpression.java:62) at org.thymeleaf.standard.expression.Expression.execute(Expression.java:112) at org.thymeleaf.standard.expression.Expression.execute(Expression.java:138) at org.thymeleaf.standard.processor.StandardDOMEventAttributeTagProcessor.doProcess(StandardDOMEventAttributeTagProcessor.Z93F725A07423FE1C889F448B33D2 1F46Z:214) at org.thymeleaf.processor.element.AbstractAttributeTagProcessor.doProcess(AbstractAttributeTagProcessor.java:74) at org.thymeleaf.processor.element.AbstractElementTagProcessor.process(AbstractElementTagProcessor.java:95) at org.thymeleaf.util.ProcessorConfigurationUtils$ElementTagProcessorWrapper.process(ProcessorConfigurationUtils.java:633) at org.thymeleaf.engine.ProcessorTemplateHandler.handleStandaloneElement(ProcessorTemplateHandler.java:918) at org.thymeleaf.engine.TemplateHandlerAdapterMarkupHandler.handleStandaloneElementEnd(TemplateHandlerAdapterMarkupHandler.java:260) at org.thymeleaf.templateparser.markup.InlinedOutputExpressionMarkupHandler$InlineMarkupAdapterPreProce ssorHandler.handleStandaloneElementEnd(InlinedOutputExpressionMarkupHandler.java:256) at org.thymeleaf.standard.inline.OutputExpressionInlinePreProcessorHandler.handleStandaloneElementEnd(OutputExpressionInlinePreProcessorHandler.java:169) at org.thymeleaf.templateparser.markup.InlinedOutputExpressionMarkupHandler.handleStandaloneElementEnd(InlinedOutputExpressionMarkupHandler.java:104) at org.attoparser.HtmlVoidElement.handleOpenElementEnd(HtmlVoidElement.java:92) at org.attoparser.HtmlMarkupHandler.handleOpenElementEnd(HtmlMarkupHandler.java:297) at org.attoparser.MarkupEventProcessorHandler.handleOpenElementEnd(MarkupEventProcessorHandler.java:402) at org.attoparser.ParsingElementMarkupUtil.parseOpenElement(ParsingElementMarkupUtil.Z93F725A07423FE1C889F448B 33D21F46Z:159) at org.attoparser.MarkupParser.parseBuffer(MarkupParser.java:710) at org.attoparser.MarkupParser.parseDocument(MarkupParser.java:301)... 50 more Caused by: org.springframework.expression.spel.SpelEvaluationException: EL1008E: Property or field 'displayValue' cannot be found on object of type 'br.com.teste.segware.util.OrderTypes[]' - maybe not public or not valid? at org.springframework.expression.spel.ast.PropertyOrFieldReference.readProperty(PropertyOrFieldReference.java:217) at org.springframework.expression.spel.ast.PropertyOrFieldReference.getValueInternal(PropertyOrFieldReference.java:104) at org.springframework.expression.spel.ast.PropertyOrFieldReference.access$000(PropertyOrFieldReference.java:51) at org.springframework.expression.spel.ast.PropertyOrFieldReference$AccessorLValue.getValue(PropertyOrFieldReference.java:406) at org.springframework.expression.spel.ast.CompoundExpression.getValueInternal(CompoundExpression.java:92) at org.springframework.expression.spel.ast.SpelNodeImpl.getValue(SpelNodeImpl.java:112) at org.springframework.expression.spel.standard.SpelExpression.getValue(SpelExpression.java:337) at org.ZDB38BD6F666CEF 7A2F938F392EB71FDAZ.spring5.expression.SPELVariableExpressionEvaluator.evaluate(SPELVariableExpressionEvaluator.java:263)

An this is the JS function (very very simple):

function enableBtn(select)
{
    if(select == 'SELECIONE' || select == 'Selecione...') 
    {
        document.getElementById('orderButton').disabled = true;
    };
}

So, if the SAME parameter renders correctly in the view, why in the th:onclick it says that the variable from the object could not be found?

Here is what I have tried so far:

th:onclick="'javascript:enableBtn(\'' + ${orderBy.displayValue} + '\');'"


th:onclick="|enableBtn('${orderBy.displayValue}');|"


th:data-enable='|{${orderBy.displayValue}}|' th:onclick="'enableBtn('enable')';'"

Please, how the heck this thing works? Thanks in advance

Answer 1

Basic JS to disable/enable the button when the selection changes.

 function enableBtn(select){
    var btn = document.getElementById('orderButton');
    if(select == 'SELECIONE' ){
        btn.disabled = true;
    } else {
        btn.disabled = false;
    }
 }

Disable the button on page load. When the selection changes check to enable the button

<select th:name="orderBy" th:onChange="enableBtn(this.value)">
   <option th:each="orderBy : ${T( com.example.demo.OrderTypes).values()}"
           th:value="${orderBy}" th:text="${orderBy.displayValue}" ></option>
</select> <br/> <br/>
<input id="orderButton" type="submit" value="Ordenar" disabled>