Rails 5、Ajax、jQuery - 无法将接收到的数据发送到特定元素答案

【问题标题】：Rails 5, Ajax, jQuery - Cant send received data to particular elementRails 5、Ajax、jQuery - 无法将接收到的数据发送到特定元素
【发布时间】：2017-03-30 16:56:33
【问题描述】：

所以，我有部分表格行和不同的表格数据在哪里。通过单击一个按钮（位于<tr> 中），我发送Ajax 请求（简单地说，使用remote: true）并使用操作更新项目数据（显示在<tr> 中）。

一切正常，但我无法将接收到的数据从 Ajax 发送到特定的<td>。如果显示更多项目 - 所有项目都会收到该数据。

_partial.html.erb：

<body>
  <div>
    <tr data-line-item-id='<%= line_item.id %>' class='line-item'>
      <td data-th="Product">
        <div class="row">
          <div class="col-sm-2 hidden-xs"></div>
          <div class="col-sm-10">
          </div>
        </div>
      </td>
      <td data-th="Price"><%= number_to_currency(line_item.product.price) %></td>
      <td data-th="Quantity">
        <%= line_item.quantity %>
      </td>
      <td data-th="Subtotal" class="text-center" class="subtotal">
        <%= number_to_currency(line_item.total_price, :unit => "€", separator: ",", format: "%n %u") %></td>
      <td class="actions" data-th="">
        <td><%= link_to "-", decrease_line_item_path(product_id: line_item.product), remote: true %></td>
        <td><%= link_to "+", increase_line_item_path(product_id: line_item.product), remote: true %></td>
      </td>
    </tr>
  </div>
</body>

减少.js.erb：

$("td[data-th='Quantity']").html('<%= @line_item.quantity %>');

我的“不错的尝试”是这样的：

$(this).parent().parent().find("td[data-th='Quantity']").html('<%= @line_item.quantity %>');

但我的“最好的成就”是只更新特定的，按数字项找到，如下所示：

$("td[data-th='Quantity']").eq(0).html('<%= @line_item.quantity %>');

否则它们都会更新...

更新

这，有点让它工作，但如果我增加一个项目的数量然后增加其他项目的数量，首先单击显示先前更新的项目编号的数量......但答案很接近。希望有人可以帮助...非常感谢

增加.js.erb：

$(document).ready(function(){
  $('.increase').click(function(){
    var element = $(this).parent().parent()
    $(element).find("td[data-th='Quantity']").html('<%= @line_item.quantity %>');
  });
});

【问题讨论】：

您想通过单击同一行中的 +/- 按钮单独增加/减少该行中的项目数？
是的。但这已经完成。现在我担心的是为什么当我增加或减少一个项目的数量，然后单击另一个项目上的增加/减少按钮时，第一次单击会显示先前增加或减少的项目数（第二次单击代表正确的数字）。我假设它与 Ajax 请求有关，例如该数据仍存储在流中。我对 Ajax 完全陌生，所以现在尝试阅读并理解一些东西
$('.increase')，你是在increase.js.erb或decrease.js.erb写的吗？
是的，我更新了我的问题以显示哪个代码代表increase.js.erb

标签： javascript jquery html ruby-on-rails ajax

【解决方案1】：

您的情况不应该在js.erb文件中添加点击事件，因为页面加载时increase.js.erb的点击功能不可用。

假设当前数量为 2。

现在在第一次点击时发送 AJAX 请求，作为响应 $('.increase') 函数已加载但它不会执行，因为第一次点击发生在 AJAX 响应之前。

定义增加 #数量增加到3。结束

刚刚加载的递增函数会有新的递增数。

// first click function loaded not triggered.
$(document).ready(function(){
  $('.increase').click(function(){
    var element = $(this).parent().parent()
    // $(element).find("td[data-th='Quantity']").html('<%= @line_item.quantity %>');
    $(element).find("td[data-th='Quantity']").html('3');
   // but as the click is not triggered in first click, the value has changed to 3.
  });
});

在第二次点击增加按钮时，第一次点击函数被执行，将td cell 的值更改为 3。为了响应第二次点击增加按钮的 AJAX 调用，又加载了一个 $('.increase').click()值 4。但是这个新加载的函数再次没有执行。

// second click function loaded not triggered in response to second click.
$(document).ready(function(){
  $('.increase').click(function(){
    var element = $(this).parent().parent()
    // $(element).find("td[data-th='Quantity']").html('<%= @line_item.quantity %>');
    $(element).find("td[data-th='Quantity']").html('4');
   // but as the click is not triggered in second click, the value has changed to 4.
  });
});
// this 2nd function will get executed on third click.

减少.js.erb

$('tr[data-line-item-id]').each(function(){
  if ($(this).data('line-item-id') == '<%= @line_item.id %>' ){
    $(this).each(function(){
      if ( $(this).data('th') == 'Quantity' ) {
        $(this).html('<%= @line_item.quantity %>');
      }
    });
  }
});

如果你给每个tr添加一个id属性，这会简单很多，例如：

<tr data-line-item-id='<%= line_item.id %>' id='row-<%= line_item.id %>' class='line-item'>
   ---
</tr>

然后像这样在 decrease.js.erb 中访问它：

$('#row-<%= @line_item.id %> td:nth-child(3)').html('<%= @line_item.quantity %>');

【讨论】：

谢谢，我稍后再看看。有些语法有点陌生
之前的评论很有道理。你能回答两个问题吗？ 1 为什么.increase 不可用？ 2 为什么在这个id='row-'中写row-？谢谢
这是因为js.erb只会在响应AJAX响应时加载，所以在结果加载之前它是不可用的。
好的....现在很明显...再次... :) 非常感谢。看起来现在一切正常！
您可以为每一行设置任何 ID 值，但想象一下，如果我们只有 <tr id="1">, <tr id="2">，这可能会由于多个元素具有相同的 而在某个时候中断ID，我们可以在数字后面附加一个单词，你可以有任何类似<tr id="quantity-2">。 ID 允许我们以更好的方式定位元素。