Rails 5, Ajax, jQuery -不能将接收到的数据发送到特定的元素

Rails 5, Ajax, jQuery - Cant send received data to particular element

本文关键字：数据 元素 jQuery Ajax 不能 Rails      更新时间：2023-09-26

所以，我有部分的地方是一个表行和不同的表数据。通过单击按钮(这是在<tr>)我发送Ajax请求(简单地说，与remote: true)，也更新项目数据(显示在<tr>)与行动。

一切都很好，但是我不能从Ajax发送接收到的数据到特定的<td>。如果显示更多的项目-所有这些都接收到该数据。

_partial.html.er b: 

<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>

decrease.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 %>');

否则它们都会被更新…

这，有点使它工作，但如果我增加一个项目的数量，然后增加其他项目的数量，首先点击显示以前更新的项目数量…但答案很接近。希望有人能帮忙…多谢

increase.js.erb : 

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

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

假设当前数量为2。

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

def增加#数量增加到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.

decrease.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>

，然后在 reduce .js中访问它。erb像这样:

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