I'm trying to send the id of the object to the controller with the button. But it only does this for an item in the first row of the list. The button does not work for other items in the list. How can I solve the problem?
$(document).ready(function () {
$("#showTweet").click(function () {
var tweetId = $(this).parent().attr("id");
$.ajax({
type: "GET",
dataType: "json",
url: "http://localhost:8020/showTweet?tweetId=" + tweetId,
success: function (result) {
var description = result.description;
$("#tweetText").text(description);
},
});
});
});
<table id="myTable" class="table table-striped">
<thead>
<tr>
<th>Kullanıcı</th>
<th>Oluşturulma Tarihi</th>
<th>Seçenekler</th>
</tr>
</thead>
<tbody>
<tr th:each="unapprovedTweets: ${unapprovedTweets}">
<td th:text="${unapprovedTweets.creative}"></td>
<td th:text="${unapprovedTweets.create_date}"></td>
<td>
<div th:id="${unapprovedTweets.id}" style="width: 0px; height: 0px; display: contents;">
<a id="showTweet" class="btn btn-warning">Tweeti Gör</a>
</div> <a th:href="@{'/sendTweet/' + ${unapprovedTweets.id}}" class="btn btn-primary" style="width: 90px; margin-left: 5px;">Onayla</a>
<a th:href="@{'/refuseTweet/' + ${unapprovedTweets.id}}" class="btn btn-danger" style="width: 90px; margin-left: 5px;">Reddet</a>
</td>
</tr>
</tbody>
</table>You can use a data-... attribute using th:attr to keep track of the id's:
Replace:
<div th:id="${unapprovedTweets.id}"
style="width: 0px; height: 0px; display: contents;">
with:
<div th:attr="data-tweetId=${unapprovedTweets.id}"
style="width: 0px; height: 0px; display: contents;">
In your JavaScript, use:
$(document).ready(function(){
$("#showTweet").click(function(){
var tweetId = $(this).parent().attr('data-tweetId');
$.ajax({
type: "GET",
dataType: "json",
url: "http://localhost:8020/showTweet?tweetId="+tweetId,
success: function(result){
var description = result.description;
$('#tweetText').text(description);
}
});
});