Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Thymeleaf : passing javascript parameters

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

like image 860
Nunyet de Can Calçada Avatar asked May 20 '17 19:05

Nunyet de Can Calçada


People also ask

Can we use JavaScript with Thymeleaf?

Thymeleaf is a modern server-side Java template engine for both web and standalone environments, capable of processing HTML, XML, JavaScript, CSS and even plain text. The main goal of Thymeleaf is to provide an elegant and highly-maintainable way of creating templates.

How do I use onclick in Thymeleaf?

How do I use onclick in Thymeleaf? 10, thymeleaf doesn't support variables of type other than Boolean and Integer inside th:onclick="" . So if you want to pass a non-boolean and non-integer argument to the onclick() method, th:onclick="" won't work. You have to use th:attr="onclick=" as shown in this answer.

Is Thymeleaf a frontend or backend?

Thymeleaf is used to render the frontend, e-mail templates and also Handlebars fragments for the dynamic part of our EnSupply frontend. Even though Thymeleaf has a huge number of features, its learning curve is relatively flat. Due to its good integration into the Spring ecosystem can be productive from day one on.


1 Answers

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>
like image 107
Arv Avatar answered Nov 06 '22 21:11

Arv