I am using "Thymeleaf", I want to send the value to javascript, I am new to this, I am trying below code:
onclick="getPropId('${properties.id}')"
and function
getPropId(inputID){alert(inputId);}
But I am not getting actual value.
-
You need to tell us what the actual value is, versus what you are expecting. My thoughts lie with the single quotes around the interpolated valueSterling Archer– Sterling Archer2015-10-07 14:26:01 +00:00Commented Oct 7, 2015 at 14:26
-
Thanks for quick reply. Thmeleaf code is as below, I am iterating through "Properties" table i am displaying name and I need to get "Property.ID", and i want this ID value in my javascript function. <tr th:each="properties:${deptUnitList}"> <td th:text="${properties.name}"></td> <td><input class="button" name="Edit" type="button" value="Edit" onclick="getPropId('${properties.id}')"/></td> </tr> and javascript is </script> function getPropId(inputID){ alert(inputID); } <script type="text/javascript">Gururaj Mb– Gururaj Mb2015-10-07 14:32:43 +00:00Commented Oct 7, 2015 at 14:32
-
Please edit that code into your question. Also, what debugging have you done? Are there errors? Does the inspected HTML yield the proper ID?Sterling Archer– Sterling Archer2015-10-07 14:47:21 +00:00Commented Oct 7, 2015 at 14:47
-
Im Iterating via Properties table, getting the value of id using ${properties.id}, For example "1" for 1st iteration, "2" for 2nd iteration.. Now I am displaying ${properties.name} in UI webpage. It has edit button as well, while onclick of Edit button, i want to get its ID value, So in onclick event I am trying to send ${properties.id} to Javascript function "function getPropId(inputID)", here parameter 'inputID' refers 'properties.id' but ihave tried alerting it inside function, but its not showing properties.id value. no javascript error, HTML yield the proper ID properlyGururaj Mb– Gururaj Mb2015-10-08 05:58:02 +00:00Commented Oct 8, 2015 at 5:58
Add a comment
|
5 Answers
Above issue is resolved now, we need to use Thymeleaf specific syntax.
th:onclick="'getPropId(\'' + ${properties.id} + '\');'"
Now if its displying proper properties.id in javascript function.
function getPropId(inputID){
alert(inputID);
}
1 Comment
rajadilipkolli
How to achieve if I have two parameters to be passed
For passing multiple parameters, you can use the following:
th:onclick="'doSomething(\''+${val1}+ '\',\''+${val2}+'\',\''+${val3}+'\');'"
Comments
Cleaner with literal substitution ||:
th:onclick="|getPropId('${properties.id}');|"
Multiple case:
th:onclick="|getPropId('${var1}','${var2}');|"
Comments
i solved the same problemm by declaring th:attribute
<div class="row" th:each="data,i : ${obj}">
<a href="javascript:void(0);" th:attr="onclick='loadDetails(\'' + ${data.objId}+'\')'">
</a>
</div>
Comments
Future visitors,
Let me introduce you to a easier way of doing it.
Yes you can do it with ' or with | or even with [[]] but the question is: Is it clean and easy to implement?
Most of us will waste more than 10 minutes to try to figure out the correct way to use '',,|| to make this line work.
Why not simply add data-attributes for each param and use it on the function? Something like this:
<button th:data-param1="${value}" th:data-param2="${value2}" onclick="call(this);"/>
Then the function:
<script>
function call(e){
const param1 = e.dataset.param1;
const param2 = e.dataset.param2;
}
</script>
I let you judge the better way of doing it, but keep in mind that someone may pass after you and read your code. So always try to keep it readable and easy to maintain.
