使用每個循環創建多個Ajax按鈕

Question

我有兩種模型：用戶和產品。一個用戶擁有多個owned_products，而一個產品屬於一個所有者。該產品有available:boolean。

我想列出一個owned_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)) %>") 

但它不工作：可用按鈕並不刷新：

當我點擊在可用（或不可用）按鈕上，沒有任何變化。如果我刷新整個頁面，它會切換，無論點擊次數如何...

你知道我失敗的地方嗎？

編輯

OK，我知道了，這是一個愚蠢的錯誤：我available_form ID是available_button_<%=@product.id%>而不是available_form_<%=@product.id%> ...

所以這裏是正確的：

app/views/products/update.js.erb

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

Answer 1

我假設你使用的是與jQuery和jquery_ujs導軌，使簡單：

：

在app /視圖/共享/ _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腳本文件

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