使用ajax实现评论局部刷新

Author: liuzxc

app/assets/stylesheets/application.scss

@@ -13,4 +13,9 @@
 
 .favorite_color {
   color: green;
+}
+
+.badge_color {
+  color: white;
+  background-color: #269abc;
 }

app/controllers/comments_controller.rb

@@ -12,8 +12,8 @@ def edit
   def create
     @article = Article.find(params[:article_id])
     @comment = @article.comments.create!(comment_params.merge(name: current_user.user_name))
-    redirect_to user_article_path(@article.user, @article), :notice => "Comment created!"
-    # render :partial => "show"
+    # redirect_to user_article_path(@article.user, @article), :notice => "Comment created!"
+    render :show
   end
 
   def update

app/views/articles/_edit_delete.html.erb

@@ -0,0 +1,8 @@
+<% if current_user == @article.user %>
+  <%= link_to edit_user_article_path(@user, @article) do %>
+    <span class="glyphicon glyphicon-pencil"></span>
+  <% end %> |
+  <%= link_to [@user, @article], method: :delete, data: { confirm: 'Are you sure?' } do %>
+    <span class="glyphicon glyphicon-trash"></span>
+  <% end %>
+<% end %>

app/views/articles/home.html.erb

@@ -16,7 +16,7 @@
 
           <% if article.comments.count.to_i != 0 %>
             <div class="media-right">
-              <span class="badge"><%= article.comments.count.to_i %></span>
+              <span class="badge badge_color"><%= article.comments.count.to_i %></span>
             </div>
           <% end %>
         </div>

app/views/articles/show.html.erb

@@ -6,31 +6,32 @@
   <div class="panel-heading">
     <h4><p class="text-center"><%= @article.title %></p></h4>
   </div>
+
   <div class="panel-body">
     <p><%= markdown(@article.content) %></p>
   </div>
+
   <div class="panel-footer" >
-    <!-- <div class="container"> -->
     <div class="row">
-    <div id="favorite" class="col-md-6 text-left"><%= render 'favorite_link' %></div>
-    <div class="col-md-6 text-right">
-    <% if current_user == @article.user %>
-      <%= link_to edit_user_article_path(@user, @article) do %>
-        <span class="glyphicon glyphicon-pencil"></span>
-      <% end %> |
-      <%= link_to [@user, @article], method: :delete, data: { confirm: 'Are you sure?' } do %>
-        <span class="glyphicon glyphicon-trash"></span>
-      <% end %>
-    <% end %>
-  </div>
-<!-- </div> -->
-</div>
+
+      <div id="favorite" class="col-md-6 text-left">
+        <%= render 'favorite_link' %>
+      </div>
+
+      <div class="col-md-6 text-right">
+        <%= render 'edit_delete' %>
+      </div>
+
+    </div>
   </div>
+
 </div>
 
-<% if @article.comments.size > 0 %>
-  <%= render 'comments/show', object: @article %>
-<% end %>
+<div id="comment">
+  <% if @article.comments.size > 0 %>
+    <%= render 'comments/show', object: @article %>
+  <% end %>
+</div>
 
 <%= render 'comments/form' %>
 

app/views/comments/_form.html.erb

@@ -1,4 +1,4 @@
-<%= form_for([@article, @comment = Comment.new], html: {class: 'form-horizontal'}) do |f| %>
+<%= form_for([@article, @comment = Comment.new], remote: true, html: {class: 'form-horizontal'}) do |f| %>
   <% if @comment.errors.any? %>
     <div id="error_explanation">
       <h2><%= pluralize(@comment.errors.count, "error") %> prohibited this comment from being saved:</h2>

app/views/comments/show.js.erb

@@ -0,0 +1,2 @@
+$("#comment").html("<%= escape_javascript(render partial: 'show') %>");
+// $("#my_articles").html("");

app/views/users/show.html.erb

@@ -1,7 +1,7 @@
 <div class="row">
 <ul class="list-group col-md-3">
   <li class="list-group-item">
-    <p class="text-left"><%= image_tag avatar_url(@user, 100) %></p>
+    <p class="text-left"><%= image_tag avatar_url(@user, 150) %></p>
     <p><h3><%= @user.user_name %></h3></p>
   </li>
   <li class="list-group-item">