The Rails UJS way

app/controllers/tags_controller.rb

@@ -4,10 +4,13 @@ class TagsController < ApplicationController
   def create
     image = @current_user.images.find(params[:image_id])
     tag = params[:tag]
-    image.tags << tag
+    image.tags << tag unless image.tags.include? tag
     image.save
 
-    redirect_to([:user, image])
+    respond_to do |format|
+      format.html { redirect_to([:user, image]) }
+      format.js { render "index", locals: { image: image, tags: image.tags } }
+    end
   end
 
   def destroy
@@ -16,6 +19,9 @@ class TagsController < ApplicationController
     image.tags.delete(tag)
     image.save
 
-    redirect_to([:user, image])
+    respond_to do |format|
+      format.html { redirect_to([:user, image]) }
+      format.js { render "index", locals: { image: image, tags: image.tags } }
+    end
   end
 end

app/views/images/show.html.erb

@@ -10,20 +10,10 @@
   </div>
 
   <div class="image-info">
-    <ul class="image-tags">
+    <%= render "tags/tags", image: @image, tags: @image.tags %>
-      <% @image.tags.each do |tag| %>
-        <li class="image-tag" id="tag-<%= tag %>">
-          <%= tag %>
-          <%= link_to "&times;".html_safe,
-              user_image_tag_path(@image, tag),
-              method: :delete,
-              class: "delete-tag" %>
-        </li>
-      <% end %>
-    </ul>
 
     <div class="new-tag-form">
-      <%= form_tag user_image_tags_path(@image), method: :post do %>
+      <%= form_tag user_image_tags_path(@image), remote: true, method: :post do %>
         <%= text_field_tag :tag %>
         <%= submit_tag "Add Tag" %>
       <% end %>

app/views/tags/_tag.html.erb

@@ -0,0 +1,8 @@
+<li class="image-tag" id="tag-<%= tag %>">
+  <%= tag %>
+  <%= link_to "&times;".html_safe,
+    user_image_tag_path(image, tag),
+    method: :delete,
+    remote: true,
+    class: "delete-tag" %>
+</li>

app/views/tags/_tags.html.erb

@@ -0,0 +1,5 @@
+<ul class="image-tags" id="image-tags">
+  <% tags.each do |tag| %>
+    <%= render "tags/tag", image: image, tag: tag %>
+  <% end %>
+</ul>

app/views/tags/index.js.erb

@@ -0,0 +1,4 @@
+document.getElementById("tag").value = "";
+
+document.getElementById("image-tags")
+  .outerHTML = `<%= render "tags", image: image, tags: tags %>`;