Question

我是AJAX的新手。我有以下视图的Ajax调用：

:javascript
$(function(){
    $('.select').change(function(){
    $.ajax({
        url: "#{update_cart_path(format: :js)}",
        type: 'post',
        data: { quantity: $("select").val(), id: $("product").attr('id') },
        dataType: 'script',
    })
    });
});


.basket-items

- @products.each do |item|
    .row
        .col-xs-6.col-md-4
            = image_tag item[:image], class: 'img-responsive'
        .col-xs-4.col-md-4
            = item[:name]
        .col-xs-4.col-md-2.select
            = select_tag :quantity, options_for_select((1..10), item[:quantity])
        .col-xs-4.col-md-2
            %span.total-item{'data-widget' => 'summary-total-item'}= to_pounds(item[:total_amount])
        %product{style: "display: none;", :id => item[:id]}

当篮子中只有一个产品/项目且用户试图更改数量时，AJAX工作正常。但是当用户将另一个/不同的产品添加到购物篮中并尝试更改添加的产品的数量时，由于某种原因，参数不会传递到AJAX调用中。调试时，传递的数据参数来自添加的第一个产品，而不是第二个产品。

我在这里做错了什么？如何从正确的产品中传递正确的选择参数？

Answer 1

您似乎正在重新查询select元素，并在提供数据时始终获取第一个元素。 jQuery val方法将为您提供所选列表中第一个项的值。您可以使用this为jQuery提供上下文，以便仅您想要的那个。

但是，通过这样做，您需要查找最近的行，然后返回到product标记以查找该产品ID。

尝试这样的事情：

:javascript
  $(function(){
    $('.select').change(function(){
      var quantity = $('select', this).val();
      var product_id = $('product', $(this).closest('.row')).attr('id');
      $.ajax({
        url: "#{update_cart_path(format: :js)}",
        type: 'post',
        data: { quantity: quantity, id: product_id },
        dataType: 'script',
      })
    });
  });

通过更加具有战略意义，可以通过更新战略来清理更改侦听器，或者使用数据属性将信息放在更方便的位置。

Answer 2

这看起来不对：$("select").val(), id: $("product")

$("select")将与页面上的第一个选项匹配，而$("product")会查找<product>之类的标记，我认为这些标记无处不在。

首先，＆＃34;数量＆＃34;你可能想说

$(this).val()

其中$(this)是其中包含更改事件的元素，即已更改的选项。

对于$("product")，我认为它应该是$("#product")：＃表示＆＃34; ID等于＆＃34;。

此外，ajax电话的网址是否正确？也许它需要在<%= %>而不是#{}。

此外，您在ajax调用中的options对象末尾有一个尾随逗号。（在＆＃39;脚本＆＃39;之后）

没有传递给购物车项目的AJAX调用的属性

2 个答案: