JavaScript function does not load inside Thymeleaf?

Question

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?

That Javascript seems to use jQuery, did you include that as well? — Usagi Miyamoto
– Usagi Miyamoto, Commented Sep 28, 2017 at 4:55
What do you mean by "js is not loading"? If you view the page source, can you see your <script> block? — Phil
– Phil, Commented Sep 28, 2017 at 5:03

Alexander Günther · Accepted Answer · 2017-09-28 05:06:43Z

2

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.

answered Sep 28, 2017 at 5:06

Alexander Günther

1801 silver badge8 bronze badges

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

Collectives™ on Stack Overflow

JavaScript function does not load inside Thymeleaf?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related