[Thymeleaf] <a> onclick 및 modal 에 변수 전달 하기.

알면 쉽고 모르면 고생하는...

 

<a class="dropdown-item" th:attr="onclick=|alert('${thingCertificate.certificateId}')|">상세정보</a>

<a class="dropdown-item" th:attr="onclick=|alert('${thingCertificate.certificateId}')|">상세정보</a>

 

<a class="dropdown-item"

  data-toggle="modal"

  href="#deleteThingCertificateModal"

  th:data-certid="${thingCertificate.certificateId}"

  th:data-certname="${thingCertificate.certificateInfo == null ? '인증서명이 존재 하지 않습니다.' : thingCertificate.certificateInfo.certName}">

인증서 삭제

</a>

...중략...

<th:block layout:fragment="script">
<script type="text/javascript">
$('#deleteThingCertificateModal').on('show.bs.modal', function (e) {
var certId = $(e.relatedTarget).data('certid');
var certName = $(e.relatedTarget).data('certname'); console.log(certId);
console.log(certName);
}
);
</script>
</th:block>

 

<a class="dropdown-item" 
  data-toggle="modal" 
  href="#deleteThingCertificateModal" 
  th:data-certid="${thingCertificate.certificateId}" 
  th:data-certname="${thingCertificate.certificateInfo == null ? '인증서명이 존재 하지 않습니다.' : thingCertificate.certificateInfo.certName}">
인증서 삭제
</a>

...중략...

<th:block layout:fragment="script">
<script type="text/javascript">
$('#deleteThingCertificateModal').on('show.bs.modal', function (e) {
    var certId = $(e.relatedTarget).data('certid');
    var certName = $(e.relatedTarget).data('certname');
    console.log(certId);
    console.log(certName);
  }
);
</script>
</th:block>

기본 전체는 Modal 창을 띄울 수 있어야 합니다.

그럼 위 내용이 쉽게 이해가 됩니다.