Thymeleaf : passing javascript parameters

Question

I have a basic SpringBoot app. using Spring Initializer, embedded Tomcat, Thymeleaf template engine, and package as an executable JAR file. I want to pass an attribute of a POJO to a javascript function:

   <tr th:each="company: ${companies}" >                                                
         <td class="col_actions">
           <a th:href="@{/company/edit/{id}(id=${company.id})}" style="color:#808080; margin-right: 10px;">
             <i class="fa fa-pencil-square-o" aria-hidden="true"></i>
           </a>
           <a href="#" style="color:#808080;  text-align: center;" onclick="javascript:confirmDelete ({id}(id=${company.id}));">
              <i class="fa fa-times" aria-hidden="true" ></i>
            </a>
         </td>
   </tr>

But I got an error: Uncaught SyntaxError: missing ) after argument list

Billal BEGUERADJ · Accepted Answer · 2017-05-21 08:30:41Z

13

The problem came from anchor, so please try this one if the confirmDelete() function require a string id

th:onclick="'javascript:confirmDelete(\'' + ${company.id} + '\');'"

And if it need a number id

th:onclick="'javascript:confirmDelete(' + ${company.id} + ');'"

edited May 21, 2017 at 8:30

Billal BEGUERADJ

23k45 gold badges125 silver badges142 bronze badges

answered May 20, 2017 at 20:50

James H.

4818 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Saurabh Gour Over a year ago

Might not work for the latest version of thymeleaf, please refer the answer I posted to a similar question stackoverflow.com/a/64884416/5105263

makson · Accepted Answer · 2018-10-03 19:39:25Z

8

Another way - th:onclick="|confirmDelete('${company.id}')|"

Or if you want send several params across '_' use th:onclick="|confirmDelete('${type}_${company.id}')|"

edited Oct 3, 2018 at 19:39

answered Oct 3, 2018 at 19:18

makson

2,3193 gold badges27 silver badges31 bronze badges

Comments

Arv · Accepted Answer · 2021-07-18 07:16:41Z

5

This works for me, easy and clear to use [[ ]]

Use a link:

<a href="#" id="editUserButton" th:onclick="editUser([[${user.getId}]])">Edit</a>

Use a button:

<button type="button" id="editUserButton" class="btn btn-primary"  th:onclick="editUser([[${user.getId}]])">Edit</button>

Pass multiple parameters:

<button type="button" id="editUserButton" class="btn btn-primary" th:onclick="editUser([[${user.getId}]],[[${user.getLastName}]])">Edit</button>

answered Jul 18, 2021 at 7:16

Arv

4674 silver badges6 bronze badges

Comments

Mykola Shorobura · Accepted Answer · 2020-09-22 19:54:39Z

4

I found so many solutions that do not help me.

This is working for me.

<div class="add-to-cart">
    <button th:attr="onclick='addToBasket(\'' + ${product.getId()}+  '\');'"> add to basket
    </button>
</div>

answered Sep 22, 2020 at 19:54

Mykola Shorobura

7881 gold badge6 silver badges13 bronze badges

1 Comment

Joseph Cozad Over a year ago

OMG... thank goodness... I too have found innumerable "solutions" to this problem and none of them worked... except for this one. This is the very best answer to this question of how to pass a model variable from Thymeleaf to a JavaScript function. Applause.

Collectives™ on Stack Overflow

Thymeleaf : passing javascript parameters

4 Answers 4

1 Comment

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related