Estoy tratando de enviar la identificación del objeto al controlador con el botón. Pero solo hace esto para un elemento en la primera fila de la lista. El botón no funciona para otros elementos de la lista. ¿Cómo puedo resolver el problema?
$(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>Puede usar un atributo data-... usando th:attr para realizar un seguimiento de las identificaciones:
Reemplazar:
<div th:id="${unapprovedTweets.id}" style="width: 0px; height: 0px; display: contents;">con:
<div th:attr="data-tweetId=${unapprovedTweets.id}" style="width: 0px; height: 0px; display: contents;">En tu JavaScript, usa:
$(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); } }); });