Creating multiple Ajax buttons with a each loop - ruby-on-rails

Question

I have two models : User and Product. One user has many owned_products, and a product belongs to an owner. The products have a available:boolean.
I want to make a list of owned_products that can be toggled from available to unavailable with a button. Here is what I did, using the M. Hartl example :
app/views/shared/_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>
app/views/products/_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>
app/controllers/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
.
.
.
app/views/products/update.js.erb
$("#available_form_<%=#product.id%>").html("<%= escape_javascript(render('available_button', product: #product)) %>")
But it doesn't work : The available button is not refreshed at all :
When I click on the available (or unavailable) button, nothing change. If I refresh the whole page, it toggles, regardless the number of clicks...
Do you know where I failed ?
EDIT
OK, I got it, it was a dumb fault : my available_form id was available_button_<%=#product.id%> and not available_form_<%=#product.id%>...
So here is the right one :
app/views/products/update.js.erb
$("#available_button_<%=#product.id%>").html("<%= escape_javascript(render('available_button', product: #product)) %>")

Answer 1

I assume that you're using rails with jquery and jquery_ujs, make it simple:
in 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>
in your js-script file:
$.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;
});
in the controller file:
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
and in your routes.rb add:
resources :products do
collection do
get :toggle
end
end