CODEWITHSUNDEEP
javascriptjqueryhtmlthymeleaf
sndu
sndu

Reputation: 1033

JavaScript function does not load inside Thymeleaf?

I want to call a Java Script function inside following Thymeleaf and HTML code

<a class='btn btn-default btn-xs' href='#' role='button' th:id="view-notification">
  View Notification
</a>
<a href="index.php?cat=notifications">
  Notifications
  <span class="badge" th:id="notification-badge">1</span>
</a>

This is my Java Script function which I have properly included (I hope so) in my html file

<th:block th:fragment="scripts">
  <script th:inline="javascript">
    $('#view-notification').click(function () {
      $('#notification-badge').hide();
    });
  </script>

I inspected the html page and saw that js is not loading. What is wrong with my code?

Upvotes: 0

Views: 1371

Answers (1)

Alexander G&#252;nther
Alexander G&#252;nther

Reputation: 180

Is the script code below the button inside the html? Otherwise the script fails to register listeners. My guess it that the time the script is run, the button is not yet there. You could try to wrap the script inside the ready function.

$(document).ready(function() {
   $('#view-notification').click(function () {
       $('#notification-badge').hide();
   });
});

Another solution would be to set the listener on window and listen for clicks on the ID. This would even work you later chnge the code and render the button with an ajax call.

Upvotes: 2

Related Questions