Javascript-Funktionsaufruf mit Thymeleaf

Question 1

Ich muss eine Javascript-Funktion für die Thymeleaf-Vorlage aufrufen, etwa so:

Fall 1:

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

Aber in diesem Fall funktioniert das Thymeleaf nicht. Vor einigen Recherchen (einschließlich Stackoverflow) bekomme ich die folgenden “Lösungen”:

Fall 2:

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

Fall 3:

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

Fall 4:

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

Aber in allen Fällen erhalte ich den gleichen Fehler: “…Ausnahme beim Auswerten des SpringEL-Ausdrucks…”

Mein Problem betrifft Javascript-Aufrufe. Ich muss einige Parameter $ {var} für den Aufruf in die js-Funktion einfügen. Wie kann ich das beheben?

Vielen Dank

Question 2

Wenn Sie keine dynamischen Variablen im JS-Funktionsaufruf benötigen, gehen Sie wie folgt vor:

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

Dadurch werden die einfachen Anführungszeichen einfach umgangen und es wird kein SpringEL benötigt (natürlich könnten Sie in diesem Fall auf das Thymeleaf-Attribut verzichten und einfach onclick verwenden).

Um vars darin einzufügen:

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

Ich habe die Alarmfunktion verwendet, damit ich es ausprobieren und beweisen kann, dass es funktioniert. Ich hoffe, das hilft.

Question 3

Sie müssen die Javascript-Funktion wie unten erwähnt aufrufen.

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

Ich denke, das könnte dir helfen.

Question 4

Soweit ich weiß, haben Sie zwei Möglichkeiten, wie Sie es tun können:

Verwendung von doppelten Klammern

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

Und dann funktioniert JS so

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

Verwendung von data-attribut

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

Und entsprechende JS-Funktion

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

Question 5

Versuche dies.

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

Question 6

Ein weiterer “neuer” Weg mit HTML5, der Datenattribute verwendet:

th:data-url="@{/yourUrl}" th:onclick="window.location.href=this.getAttribute('data-url')"

Question 7

Eine Möglichkeit besteht darin, die Zeichen zu verwenden [[' y ']].

Zum Beispiel werde ich den Inhalt der Variable „startDate“ zeigen, die ein Datumstyp und die Formatierung im Format ist dd/MM/yyyy HH:mm:ss' mit der ‘Alarm’-Funktion anzuzeigen.

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

Die Ausgabe ist wie folgt:

22/02/2019 15:43:02

Question 8

ich habe es so gemacht:

<td><a href="#" th:onclick="@{'deletetag(' + ${tag.id} + ');'}"><i class="nav-icon fas fa-trash"></i></a></td>

Und die deletetag-Funktion innerhalb einer einfachen <script></script>