m.aibin m.aibin - 4 months ago 20
jQuery Question

jQuery load + Thymeleaf

I have a problem with jQuery load function.
I checked also this article, but it didn't help me:
Jquery load doesn't work

This is the load function:

function loadMore(eventId) {
swal("Loading More");
$.ajax({
type: "GET",
url: "/event/detail/"+eventId+"/more",
datatype : "html",
success: function(html) {
console.log(html);
swal("Check console log");
$("#detail-item.comments-bar.tag-fixed").load(html);
}
});
}


and this is HTML:

<div class="detail-item comments-bar tag-fixed" th:fragment="commentsMore">
<ul class="comments-list" >
<li>
<div class="content">
<p th:unless="${!comments.content.isEmpty()}" >No comments. You can be the first one!</p>
<p sec:authorize="isAnonymous()">You are not logged in! Please log in to start commenting :)</p>
</div>
</li>
</ul>
<a class="border-btn btn more" th:if="${!comments.content.isEmpty()}" th:onclick="'loadMore(\'' + ${event.eventId} +'\')'">Load previous comments</a>
</div>


The controller function returns HTML correctly, as I am logging this to the console. But nothing really happens in the view, it does not refresh, it does not change.

Any suggestions?

Answer

As I can see the detail-item is a class and not an id, so replace this line of code

$("#detail-item.comments-bar.tag-fixed").load(html);

with this one

$(".detail-item.comments-bar.tag-fixed").load(html);

Hope this helps