Search code examples
springthymeleaf

Thymeleaf th:onclick event - calling confirm function

I am new to Thymeleaf. Recently I stumbled in the following situation. Here is a piece of my Thymeleaf html page:

<!-- an delete button link -->
<a th:href="@{/employees/delete(employeeId=${tempEmployee.emplId},firstName=${tempEmployee.firstName},lastName=${tempEmployee.lastName})}"
    class="btn btn-danger btn-sm py-1 "
    th:onclick="if(!(confirm('Are you sure you want to delete this employee ?') )) return false" >
    Delete
</a>

This code works fine as intended. However I want to add employee name as part of the confirmation. Here is the code:

<!-- an delete button link -->
<a th:href="@{/employees/delete(employeeId=${tempEmployee.emplId},firstName=${tempEmployee.firstName},lastName=${tempEmployee.lastName})}"
    class="btn btn-danger btn-sm py-1 "
    th:onclick="if(!(confirm('Are you sure you want to delete this employee ' + '\'+${tempEmployee.firstName}+\'' +'?' ) )) return false" >
    Delete
</a>

Unfortunately the result is: Are you sure you want to delete this employee '+${tempEmployee.firstName}+'.

Looks like Thymeleaf does not recognize ${tempEmployee.firstName}. It has no problem with it in th:href tag but does not like it in th:onclick.

I would appreciate if somebody can turn me into the right direction.

Solution

  • Not sure exactly what the problem is (though it may be related to onclick vs th:onclick. Regardless, I think a format more like this will work (with some added benefits like no JavaScript injection).

    <!-- an delete button link -->
<a
  th:href="@{/employees/delete(employeeId=${tempEmployee.emplId},firstName=${tempEmployee.firstName},lastName=${tempEmployee.lastName})}"
  class="btn btn-danger btn-sm py-1 "
  th:data-confirm-delete="|Are you sure you want to delete this employee ${tempEmployee.firstName}?|"
  onclick="if (!confirm(this.getAttribute('data-confirm-delete'))) return false"
>
  Delete
</a>

    (Notice I'm using onclick and not th:onclick.