Pass the respective data value for dynamically created button when click event is called in ajax

user_4947216 0
Viewed 86

The array data from the server is received through ajax and the buttons are created dynamically. How can I get the particular data for respective button when it is clicked. For instance: if data from server is ['a', 'b', 'c'], there are 3 buttons. When the 1st btn is clicked, it should pass 'a' in the click function and so on.

$.ajax({
    url: urltest,
    method: 'POST',
    data: data,
    success: function (response) {
        var data = $.parseJSON(response);
        $("#multiple_search_table").find("tr:gt(0)").remove();

        $.each(data, function (index, value) { // how can I pass this individual value when the button is clicked.
            $('#multiple_search_table').append('<tr><td>\n' + 
            '<button class="search-value" data-dismiss="modal"> Select</button>\n' + '</td></tr>');
        });
    },
});

How to get the respective data value in this function?

$(document).on('click', '.search-value', function () {
    //how can I get the data for specific button?
});

Thanks in advance.

jquery ajax javascript
2 Answers

You can add another data attribute to the button element. Then you can access that data attribute on clicking the button.

Demo:

var data = ['a', 'b', 'c'];
$.each(data, function (index, value) { // how can I pass this individual value when the button is clicked.
    $('#multiple_search_table').append('<tr><td>\n' + 
    '<button class="search-value" data-dismiss="modal" data-value="'+value+'"> Select</button>\n' + '</td></tr>');
});

$(document).on('click', '.search-value', function () {
    //how can I get the data for specific button?
    console.log($(this).data('value'))
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="multiple_search_table"></div>

Update: Storing the object in the data-value attribute in the form of string and access each property by the key name:

var data = [{id:1, name:"a"}, {id:2, name: "b"}, {id:3, name: "c"}]
$.each(data, function (index, value) { // how can I pass this individual value when the button is clicked.
    $('#multiple_search_table').append('<tr><td>\n' + 
    '<button class="search-value" data-dismiss="modal" data-value='+JSON.stringify(value)+'> Select</button>\n' + '</td></tr>');
});

$(document).on('click', '.search-value', function () {
    //how can I get the data for specific button?
    var obj = $(this).data('value');
    console.log('id:', obj.id);
    console.log('name:', obj.name);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="multiple_search_table"></div>

user_74613810

You could use the data-* attribute:

$.ajax({
  url: urltest,
  method: 'POST',
  data: data,
  success: function(response) {
    var data = $.parseJSON(response);
    $("#multiple_search_table").find("tr:gt(0)").remove();
    $.each(data, function(index, value) { // how can I pass this individual value when the button is clicked.
      $('#multiple_search_table').append(`
        <tr>
          <td>
            <button data-value="${value}" type="button" class="search-value" data-dismiss="modal"> Select</button>
          </td>
        </tr>
      `);
    });
  },
});


$(document).on('click', '.search-value', function() {
  const value = $(this).data("value");
  console.log(value);
});

And PS: don't use .append() inside loops for performance reasons. Append only once after the loop:

$.ajax({
  url: urltest,
  method: 'POST',
  data: data,
  success: function(response) {
    const TRs = $.parseJSON(response).reduce((ar, item) => {
      ar.push($("<tr>", {
        append: `<td><button data-value="${value}" type="button" class="search-value" data-dismiss="modal"> Select</button></td>`
      }));
      return ar;
    }, []);
    $('#multiple_search_table').append(TRs);
  },
});


$(document).on('click', '.search-value', function() {
  const value = $(this).data("value");
  console.log(value);
});
user_3839040
Related