Rails/Javascript：数据属性未通过部分返回，但存在于 DOM

Question

我正在尝试在 select 字段下方显示运费字段的值。感谢@Vasfed，我正在尝试使用数据属性和 javascript。但是，虽然在加载页面时数据属性在 DOM 中呈现，但在检查控制台或资源时，它不会在数据 return 中为 AJAX 调用 return 编辑。

在DOM中：

<select id="shippingservices_select" name="cart[shippingservice_id]"><option value="">select a carrier</option>
  <option value="7" data-price="3.9">UPS</option>
  <option value="19" data-price="10.0">DHL</option>
</select>

获取的部分：

$("#shippingservices_select").empty()
  .append("<option value=\"7\">UPS<\/option><option value=\"19\">DHL<\/option>");

我正在使用以下 ajax 调用：

$(document).on("change", "#lands_select", function(event){
  jQuery.ajax({
    url: "/carts/update_shipping/" + event.target.value,
    type: "GET",
    error: function (xhr, status, error) {
      console.error('AJAX Error: ' + status + error);
    },
    success: function (response) {
      console.log(response);
    }
  });
});

值和数据属性应该return，对于表单：

<%= form_for :cart, :url => {:action => "show_shipping"}, :html => { :method => "get", :remote => true } do |f| %>
  <%= f.collection_select(:land_id, Land.all, :id, :name, {:prompt => "select a country"}, {:id => 'lands_select'}) %><br>
  <%= f.select(:shippingservice_id, options_for_select(@shippingservices.collect { |s| [s.name.titleize, s.id, {'data-price' => s.price}] }), {:prompt => "select a carrier"}, {:id => 'shippingservices_select'}) %><br>
<% end %>
Shipping: €<div id="shipping_cost"></div><br>

update_shipping.js.erb 视图：

$("#shippingservices_select").empty()
  .append("<%= escape_javascript(render(:partial => @shippingservices)) %>");

和 _shippingservice.html.erb 的渲染部分：

<option value="<%= shippingservice.id %>" data-price="<%= shippingservice.price %>"><%= shippingservice.name.titleize %></option>

在我的控制器中：

def update_shipping
  ...
  respond_to do |format|
    format.js
  end
end

按照我的部分 _shippingservice.html.erb 我应该同时获得值和数据属性，但我没有。我认为这就是原因：

$(document).on("change", "#shippingservices_select", function(event){
  var price = $(event.target).data('price');
  $("#shipping_cost").html(price);
});

不return数据价格的价值。

我怎样才能让它工作？提前谢谢你。

更新

我正在尝试对其进行故障排除，但事情似乎很奇怪。

select 或 DOM 中都显示数据。在页面加载时加载的送货服务 select 字段显示了所有内容。在更改土地时 select 或者，加载的部分以及我可以在控制台中检查的部分仅显示选项值 + 名称，但是在更改 _shippingservice 部分时我发现通过 [=61 加载的代码=] 似乎不是由 JS Ajax 调用中引用的部分生成的，因为我可以更改内部代码而不会对交付的有效负载产生任何影响。

但是当替换

<%= escape_javascript(render(:partial => @shippingservices))%>

由

<%= escape_javascript(render ‘carts/shippingservice’)%>

没有显示和加载任何内容。

Answer 1

您可以检查在您所在的终端上呈现了哪些部分运行 rails。看起来您有超过 1 个可能的运输服务部分。

您还可以指定使用哪个部分，而不是让 rails 猜测：

render partial: 'carts/shippingservice', collection: @shippingservices, as: :shippingservice

Rails/Javascript：数据属性未通过部分返回，但存在于 DOM

Rails/Javascript: Data attribute not returned through partial, but present in DOM

javascript

ajax

jquery

ruby-on-rails

custom-data-attribute