将JavaScript文字传递给th：onclick时，Thymeleaf找不到我的变量

gbossa 发表于 Dev

格博萨

我试图在使用Thymeleaf变量的Thymeleaf模板上使用JavaScript函数，如下所示：

 <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>

变量是此Enum中的一个选项（使用Lombok生成吸气剂）：

@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;
    }

}

带有th：each菜单中的选项正确显示在呈现的HTML中作为下拉选择/选项菜单。

但是，当我使用相同的变量作为te方法的JavaScript参数呈现时，出现以下错误：

org.attoparser.MarkupEventProcessorHandler.handleOpenElementEnd（MarkupEventProcessorHandler.java:402）的org.attoparser.ParsingElementMarkupUtil.parseOpenElement（ParsingElementMarkupUtil.java:java）的handleOpenElementEnd（HtmlMarkupHandler.java:297）org.attoparser.MarkupPar。：710）at org.attoparser.MarkupParser.parseDocument（MarkupParser.java:301）... 50更多原因：org.springframework.expression.spel.SpelEvaluationException：EL1008E：在的对象上找不到属性或字段“ displayValue”输入“ br.com.teste.segware.util.OrderTypes []”-可能不公开或无效？在org.springframework.expression.spel.ast.PropertyOrFieldReference.readProperty（PropertyOrFieldReference.java:217）在org.springframework.expression.spel.ast.PropertyOrFieldReference.getValueInternal（PropertyOrFieldReference。

这是JS函数（非常简单）：

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

因此，如果SAME参数在视图中正确呈现，为什么在th：onclick中却说找不到对象的变量？

到目前为止，这是我尝试过的：

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


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


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

拜托，这东西到底是怎么工作的？提前致谢

德克·迪恩

基本JS在选择更改时禁用/启用按钮。

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

禁用页面加载上的按钮。选择更改时，请启用按钮

<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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。