Jquery closest input in dynamic table

Question

I am a beginner in Jquery and Rails.

I am trying to fetch data from rails controller and set the same to text fields located in Dynamic table.

HTML

<tbody id="template">
            <tr>
                <td>
                    <select name="order[order_placed][][itemname]" id="order_place_id" class="form-control delete-comment" style="width: 300px">
                        <option value=""></option>
                        <% Item.all.each do |item| %>
                            <option value="<%= item.item_name %>">
                                <%= item.item_name %>
                            </option>
                            <% end %>
                    </select>
                </td>

                <td><input name="order[order_placed][][quantity]" type="text"  size='10' class="form-control" /></td>
                <td><input name="order[order_placed][][unitprice]" type="text"  size='10' class="form-control" /></td>
                <td><input name="order[order_placed][][tax]" type="text"  size='10' class="form-control"/></td>
                <td><input name="order[order_placed][][discount]" type="text"  size='10' class="form-control"/></td>
                <td><input name="order[order_placed][][itemtotalprice]" type="text" size='10' class="form-control" /></td>
                <td>
                    <button type="button" class="btn btn-default btn-sm sub" onClick="$(this).closest('tr').remove();">
                        <span class="glyphicon glyphicon-minus"></span>
                    </button>
                </td>
            </tr>
        </tbody>

---

JS

    $(document).on('change', 'select', function() {    //var url = $('.delete-comment').attr('data-url');
        $.ajax({
          url: "/items/getdata",
          type: 'get',
          data: {data_value: $(this).val()},
          dataType: 'json',
          success: function (data) {         $(this).closest('tr').next('td').next('td').next('td').find('input[name="order[order_placed][][unitprice]"]').val(data.unit_price);
             $('input[name="order[order_placed][][tax]"]').val(data.tax);
             $('input[name="order[order_placed][][discount]"]').val(data.discount);
 },        error: function () {
            alert('error');
          }
        }); 
      });

---

Data is fetched properly and is set to the text boxes if we assign them directly( data.tax and data.discount are set properly). As the table is dynamic, i am trying to put data by finding the closest tr element followed by next td (Select element) again next td (Quantity) again next td (Unit Price). [This is the text field i wanted to place data.]

But this is not working properly.

Can some one please help.

Advance Thanks...!!!

Answer 1

this doesn't refers to current element the success callback, thus $(this) will not work.

You can cache the reference of TR in a variable which can be used is the success callback

$(document).on('change', 'select', function() { //var url = $('.delete-comment').attr('data-url');
  //Keep a reference of current element 
  var tr = $(this).closest('tr');

  $.ajax({
        ...
        success: function(data) {
            tr.find('input[name="order[order_placed][][unitprice]"]').val(data.unit_price);
            tr.find('input[name="order[order_placed][][tax]"]').val(data.tax);
            tr.find('input[name="order[order_placed][][discount]"]').val(data.discount);
        },
    });
});

---

OR, You can set context option of $.ajax()

$(document).on('change', 'select', function() {

    $.ajax({
        ...
        context: $(this).closest('tr'), // Set  context to TR 
        success: function(data) {
            $(this).find('input[name="order[order_placed][][unitprice]"]').val(data.unit_price);
            $(this).find('input[name="order[order_placed][][tax]"]').val(data.tax);
            $(this).find('input[name="order[order_placed][][discount]"]').val(data.discount);
        },
    });
});