Upvotes in AJAX with remote: true

app/assets/stylesheets/components/_product.scss

@@ -30,6 +30,7 @@
 
 /* Upvote design */
 .product-upvote {
+  display: inline-block;
   padding-right: 20px;
   text-align: center;
   transition: all 0.15s ease;

app/controllers/upvotes_controller.rb

@@ -1,14 +1,24 @@
 class UpvotesController < ApplicationController
   def create
     # Upvote?
-    product = Product.find(params[:product_id])
-    product.upvotes.create! user: current_user
-    redirect_to products_path
+    @product = Product.find(params[:product_id])
+    @product.upvotes.create! user: current_user
+
+    respond_to do |format|
+      format.html { redirect_to products_path }
+      format.js
+    end
   end
 
   def destroy
     upvote = Upvote.find(params[:id])
+    @product = upvote.product
+
     upvote.destroy
-    redirect_to products_path
+
+    respond_to do |format|
+      format.html { redirect_to products_path }
+      format.js
+    end
   end
 end

app/views/products/index.html.erb

@@ -6,33 +6,9 @@
 
         <div class="product">
 
-          <% if user_signed_in? %>
-
-            <%# Upvote action %>
-            <% if current_user.voted_for?(product) %>
-              <%= link_to upvote_path(current_user.upvotes.where(product: product).first), method: :delete, class: 'product-upvote product-upvoted' do %>
-                <div class="product-arrow"></div>
-                <div class='product-count'>
-                  <%= product.upvotes.size %>
-                </div>
-              <% end %>
-            <% else %>
-              <%= link_to upvotes_path(product_id: product.id), method: :post, class: 'product-upvote' do %>
-                <div class="product-arrow"></div>
-                <div class='product-count'>
-                  <%= product.upvotes.size %>
-                </div>
-              <% end %>
-            <% end %>
-
-          <% else %>
-            <div class='product-upvote'>
-              <div class="product-arrow"></div>
-              <div class='product-count'>
-                <%= product.upvotes.size %>
-              </div>
-            </div>
-          <% end %>
+          <div class="upvote-container" id="product-<%= product.id %>">
+            <%= render 'upvotes/show', product: product %>
+          </div>
 
           <% if product.photo? %>
             <%= cl_image_tag(product.photo.path, height: 117, width: 175, crop: :fill, class: 'product-image') %>

app/views/upvotes/_show.html.erb

@@ -0,0 +1,25 @@
+<% if user_signed_in? %>
+  <% if current_user.voted_for?(product) %>
+    <%= link_to upvote_path(current_user.upvotes.where(product: product).first), remote: true, method: :delete, class: 'product-upvote product-upvoted' do %>
+      <div class="product-arrow"></div>
+      <div class='product-count'>
+        <%= product.upvotes.size %>
+      </div>
+    <% end %>
+  <% else %>
+    <%= link_to upvotes_path(product_id: product.id), remote: true, method: :post, class: 'product-upvote' do %>
+      <div class="product-arrow"></div>
+      <div class='product-count'>
+        <%= product.upvotes.size %>
+      </div>
+    <% end %>
+  <% end %>
+
+<% else %>
+  <div class='product-upvote'>
+    <div class="product-arrow"></div>
+    <div class='product-count'>
+      <%= product.upvotes.size %>
+    </div>
+  </div>
+<% end %>

app/views/upvotes/create.js.erb

@@ -0,0 +1 @@
+$('#product-<%= @product.id %>').html('<%= j render 'upvotes/show', product: @product %>');

app/views/upvotes/destroy.js.erb

@@ -0,0 +1 @@
+$('#product-<%= @product.id %>').html('<%= j render 'upvotes/show', product: @product %>');