Question

我有两种型号：用户和产品。一个用户拥有许多owned_products，一个产品属于所有者。产品有available:boolean。

我想列出一个own_products列表，可以通过按钮从可用切换到不可用。以下是我使用M. Hartl example：

所做的事情

应用/视图/共享/ _owned_products_list.html.erb

<ol class="products">
  <% @owned_products.each do |product| %>
    <%= link_to(product.name, product) %>
    <%= render 'products/available_form', product: product %>
  <% end %>
</ol>

应用/视图/产品/ _available_form.html.erb

<div id="available_button_<%=product.id%>">
 <% if product.available? %>
    <%= form_for(product, remote: true) do |f| %>
      <div><%= f.hidden_field :available, value: nil %></div>
      <%= f.submit t('product.available.undo'), class: "btn btn-small" %>
    <% end %>
  <% else %>
    <%= form_for(product, remote: true) do |f| %>
      <div><%= f.hidden_field :available, value: true %></div>
      <%= f.submit t('product.available.do'), class: "btn btn-primary btn-small" %>
    <% end %>
  <% end %>
</div>

应用/控制器/ products_controller.rb

    .
    .
    .
  def update
    @product = Product.find(params[:id])
    if @product.update_attributes(product_params)
      respond_to do |format|
        format.html do
          flash[:success] = t('flash.success.product.update')
          redirect_to @product
        end
        format.js
      end
    else
      render 'edit'
    end
  end
    .
    .
    .

应用/视图/产品/ update.js.erb

$("#available_form_<%=@product.id%>").html("<%= escape_javascript(render('available_button', product: @product)) %>")

但它不起作用：可用按钮根本不刷新：

当我点击可用（或不可用）按钮时，没有任何变化。如果我刷新整个页面，它会切换，无论点击次数......

你知道我失败了吗？

修改

好吧，我明白了，这是一个愚蠢的错误：我的available_form id是available_button_<%=@product.id%>而不是available_form_<%=@product.id%> ......

所以这是正确的：

应用/视图/产品/ update.js.erb

$("#available_button_<%=@product.id%>").html("<%= escape_javascript(render('available_button', product: @product)) %>")

Answer 1

我假设您正在使用带有jquery和jquery_ujs的rails，使其变得简单：

在app / views / shared / _owned_products_list.html.erb

中

<ol class="products">
  <% @owned_products.each do |product| %>
    <%= link_to product.name, product %>
    <%= link_to product.available ? 'turn off' : 'turn on', '#', :class => 'toggle-availability', :'data-id' => product.id %>
  <% end %>
</ol>

在你的js-script文件中：

$.ajaxSetup({
  headers: {
    'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')
  }
});    

$(document).on('click', '.toggle-availability', function() {
   var el = $(this);
   var status = el.text();
   $.post('/products/toggle', { id: el.data('id') }, function() {
      el.text(status == 'turn off' ? 'turn on' : 'turn off');
   });
   return false;
});

在控制器文件中：

def toggle
  if request.xhr?
     product = Product.find(params[:id])
     # note here that you should also check the owner of the product
     product.available = product.available.nil? ? true : false
     product.save
  end
  render :nothing => true
end

并在您的routes.rb中添加：

resources :products do
  collection do
    get :toggle
  end
end

使用每个循环创建多个Ajax按钮

1 个答案: