Using Thymeleaf Variable in Onclick Attribute

Using thymeleaf variable in onclick attribute

I solve this issue with this approach:

th:onclick="|upload('${command['class'].simpleName}', '${gallery}')|"

Thymeleaf onclick send string as parameter value to javascript function

It can be done by using the following:-

<label th:onclick="getUserId([[${userId}]],[[${email}]] );" for="radio-11" data-toggle="tooltip" data-placement="bottom" data-trigger="hover"  class="pm-tab1-pad">

Here, userId is of Integer type end email is of String type.

Update :-

This also works:-

<label th:data-parameter1="${userId}" th:data-parameter2="${email}"  th:onclick="getUserId(this.getAttribute('data-parameter1'),this.getAttribute('data-parameter2'));" for="radio-11" data-toggle="tooltip" data-placement="bottom" data-trigger="hover"  class="pm-tab1-pad">

Thymeleaf setting object attribute based on click

The code you have there doesn't really make sense. <div />s do not have a value attribute, and the expression in a th:onclick must be valid javascript (instead you have a blank selection variable expressions: th:onclick="*{}"). Maybe you're looking for something like this?

<form class="container" th:action="@{/processSignup}" method="post" th:object="${user}">
    <input type="hidden" th:field="*{userRole}" id="userRole" />
    
    <div class="switch">
        <div class="MenteeSignUp" onclick="document.getElementById('userRole').value = 'MENTEE';">Mentee</div>
        <div class="MentorSignUp" onclick="document.getElementById('userRole').value = 'MENTOR';">Mentor</div>
    </div>

How to pass arguments to javascript function call when using onClick in Thymeleaf

See this: Restricted mode: Avoid variable expressions returning strings in processors for event handlers (th:on*).

In order to correctly pass Thymeleaf variables to the onclick event, put the variable in a data attribute, and read it using getAttribute().

th:data-longDescription="${document.docTypeLongDesc}" onclick="viewDocument(this.getAttribute('data-longDescription'));"

Javascript function call with Thymeleaf

If you don't need any dynamic vars in the JS function call, this is how to do it:

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

This simply escapes the single quotes and requires no SpringEL (of course you could dispense with the thymeleaf attribute in this case and just use plain onclick).

To insert vars into it:

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

Used the alert function to allow me to try it out and prove it works. Hope that helps.

How to set variable in thymeleaf?

I think you might be mixing concepts here. A javascript function can't recieve a thymeleaf parameter, because what thymeleaf does is "compiling" the page before sending it to the client. Once it's on the client (and javascript may execute) there is no thymeleaf anymore.

What you can do is make each onclick call to loadDetailView have a different parameter in each <tr>, in the following way:

<tr th:unless="${size} == '0'" th:each = "docs, iter : ${list}"
style="cursor:pointer;" onclick="loadDetailView([[${iter.index}]])">

Which would call loadDetailView with 0, 1, 2, etc depending on the row.

---

Related Topics