Question

我是Jquery和Rails的初学者。

我正在尝试从rails控制器获取数据并将其设置为位于Dynamic表中的文本字段。

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.tax和data.discount设置正确）。由于该表是动态的，我试图通过在tr（数量）下一次td再次找到最接近的td元素后跟下一个td（选择元素）来放置数据}（单价）。 [这是我想放置数据的文本字段。]

但这不能正常运作。

请有人帮忙。

提前谢谢...... !!!

Answer 1

this未引用success回调的当前元素，因此$(this)将无效。

您可以将TR的引用缓存在可以使用的变量success回调

中

$(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);
        },
    });
});

或者，您可以设置$.ajax()

的context选项

$(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);
        },
    });
});

动态表

1 个答案: