I am trying to send id to Controller with a dynamic button but it is not working

Question

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>

`id`s are unique within the document, jQuery finds only a single element with id of `showTweet` and attaches the even to that element only. Use the class attribute to identify a larger group of elements. It's also possible and highly recommended to use [event delegation](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements/1207393#1207393) on table elements. — Teemu, Dec 13 '21 at 09:04

score 0 · Answer 1 · answered Dec 13 '21 at 09:58

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);
            
             }
        });
    });

As far as I understand, the problem is that the button is detected with the same name in other elements of the list. Thanks for your suggestion. Do you have any suggestions on multiple button onclick? — , Dec 13 '21 at 10:13

I am trying to send id to Controller with a dynamic button but it is not working

1 Answers1