Создание нескольких кнопок Ajax с каждой петлей

Question

У меня есть две модели: пользователь и продукт. Один пользователь имеет много принадлежащих_products, а продукт принадлежит владельцу. Продукты имеют available:boolean.

Я хочу составить список принадлежащих_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)) %>") 

Но это не работает: Имеющаяся кнопка не обновляется на всех:

Когда я нажимаю на доступной (или недоступной) кнопке ничего не меняется. Если я обновляю всю страницу, она переключается, независимо от количества кликов ...

Знаете ли вы, где я не смог?

EDIT

ОК, я получил его, это была глупая ошибка: мой available_form было Ид 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, сделать это просто:

в приложение/просмотров/общий/_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