web-dev-qa-db-ja.com

ThymeleafでのJavaScript関数呼び出し

次のようなthymeleafテンプレートでjavascript関数を呼び出す必要があります。

事例1：

<select th:onclick="${'function1('a')'}">

しかし、この場合、タイムリーフは機能しません..いくつかの研究前（stackoverflowを含む）、次の「解決策」が得られました。

ケース2：

<select th:onclick="${'function1(''a'')'}">

ケース3：

<select th:onclick="${'function1(\'a\')'}">

ケース4：

<select th:onclick="${'function1(\''+'a'+'\')'}">

しかし、すべての場合に同じエラーが発生します： "... SpringEL式の評価中に例外が発生しました..."

私の問題は、javascriptの呼び出しに関するものです。js関数での呼び出しにいくつかのパラメーター$ {var}を配置する必要があります。どうすれば修正できますか？

ありがとう

jqueryspringthymeleaf
13
f4root

JS関数呼び出しで動的変数が必要ない場合は、次のようにします。

th:onclick="'alert(\'a\');'"

これは、単一引用符を単純にエスケープし、SpringELを必要としません（もちろん、この場合はthymeleaf属性を省き、単純なonclickを使用できます）。

Varsを挿入するには：

th:onclick="'alert(\'' + ${myVar} + '\');'"

アラート機能を使用して、試してみて、機能することを証明しました。お役に立てば幸いです。

42
Tom Bunting

下記のようにjavascript関数を呼び出す必要があります。

th:onclick="'javascript:function1(\''+ ${a} +'\');'"

これはあなたを助けることができると思います。

5
Newbie

これを試して。

th:onclick="${'javascript:functionXXX(' + obj.id + ')'}"
3
Tinily

JSで2つの値を送信します。

function openGate(IP,Port) {
   // Some operations with parameters IP and Port
}


<button id="open" type="button" th:onclick="'openGate(\'' +${gate.gateIp} +'\',\''+${gate.gatePort}+'\')'"  class="btn btn-warning">Open the gate</button>

Thymeleaf onclickでは、パラメーターにクォータを使用しています。ソースページは次のようになります

<button id="open" type="button" onclick="openGate('192.168.10.10','9938')"  class="btn btn-warning">Open gate</button>
0
ToT McKid

1つの方法は、文字[[' y ']]を使用することです。

たとえば、Date型の変数「startDate」の内容を表示し、「alert」関数を使用して表示するdd/MM/yyyy HH:mm:ss'形式でフォーマットします。

<input type="button" th:onclick="alert([[${#dates.format(processInstance.startDate, 'dd/MM/yyyy HH:mm:ss')}]]);" />

出力は次のようになります。

22/02/2019 15:43:02
0
rjcdz04

私が知る限り、あなたはそれを行う方法が2つあります：

  1. 二重括弧の使用

    <body th:onload="showToast([[${toast}]])">
...
</body>

そして、JSはこのように機能します

function showToast(toast) {
    M.toast({html: toast});
}

  1. データ属性の使用

    <body th:data-toast="${toast}" th:onload="showToast()">
...
</body>

そして適切なJS関数

function showToast() {
    var toast = document.querySelectorAll('body')[0].getAttribute('data-toast');
    M.toast({html: toast});
}
0
Jozef