Like button doesn't refresh to unlike but the relationship is created in the model

Hi I've set set of an appreciation controller that handles user's liking different posts. Each post has a like button and when I click it looks like the request goes through but the page doesn't refresh and update the button.

When I click like this is the log, it shows the unlike partial being returned but nothing changes:

Started POST "/appreciations" for 127.0.0.1 at 2011-04-22 05:47:28 -0700
Processing by AppreciationsController#create as JS
Parameters: {"utf8"=>"✓",   "authenticity_token"=>"zQQJeXZiAPFeQ/7AEy9hvQac01+jq929XUXHrd6eSOE=",    "appreciation"=>{"liked_id"=>"3"}, "commit"=>"Like"}
User Load (1.1ms)  SELECT "users".* FROM "users" WHERE ("users"."id" = 4) LIMIT 1
Post Load (0.4ms)  SELECT "posts".* FROM "posts" WHERE ("posts"."id" = 3) ORDER BY posts.created_at DESC LIMIT 1
SQL (0.5ms)  INSERT INTO "appreciations" ("created_at", "liked_id", "liker_id", "updated_at") VALUES ('2011-04-22 12:47:28.642264', 3, 4, '2011-04-22 12:47:28.642264')
Redirected to http://localhost:3000/posts/3
Completed 302 Found in 185ms

Started GET "/posts/3" for 127.0.0.1 at 2011-04-22 05:47:28 -0700
Processing by PostsController#show as HTML
Parameters: {"id"=>"3"}
Post Load (0.4ms)  SELECT "posts".* FROM "posts" WHERE ("posts"."id" = 3) ORDER 开发者_如何转开发BY posts.created_at DESC LIMIT 1
User Load (1.2ms)  SELECT "users".* FROM "users" WHERE ("users"."id" = 4) LIMIT 1
Appreciation Load (0.3ms)  SELECT "appreciations".* FROM "appreciations" WHERE ("appreciations".liker_id = 4) AND ("appreciations"."liked_id" = 3) LIMIT 1
CACHE (0.0ms)  SELECT "appreciations".* FROM "appreciations" WHERE ("appreciations".liker_id = 4) AND ("appreciations"."liked_id" = 3) LIMIT 1
Rendered posts/_unlike.html.erb (49.4ms)
Rendered users/_like_form.html.erb (77.7ms)
Rendered posts/show.html.erb within layouts/application (208.9ms)
Completed 200 OK in 248ms (Views: 212.4ms | ActiveRecord: 5.2m

appreciations controller

class AppreciationsController < ApplicationController
  before_filter :authenticate_user!

  def create
    @post = Post.find(params[:appreciation][:liked_id])
    current_user.like!(@post)
    redirect_to @post
  end

  def destroy
    @post = Appreciation.find(params[:id]).liked
    current_user.unlike!(@post)
    redirect_to @post
  end

end

_like_form.html.erb

<% unless current_user?(@user) %>
  <div id="like_form">
    <% if current_user.likes?(@post) %>
    <%= render 'posts/unlike' %>
  <% else %>
    <%= render 'posts/like' %>
  <% end %>
 </div>

<% end %>

_like.html.erb

<%= form_for(current_user.appreciations.
                      build(:liked_id => @post.id),
                      :remote => true) do |f| %>
 <div><%= f.hidden_field :liked_id %></div>
 <div class="actions"><%= f.submit "Like" %></div>
<% end %>

_unlike.html.erb

<%= form_for(current_user.appreciations.find_by_liked_id(@post),
                               :html => { :method => :delete },
                               :remote => true) do |f| %>
<div class="actions"><%= f.submit "Unlike" %></div>
<% end %>

Should the result of POST "/appreciations" be a redirect to http://localhost:3000/posts/3? You're using the :remote => true option of the form so I believe you need to change your controller to this:

respond_to do |format|
  format.html { redirect_to @post}
  format.js
end

And create a *.js.erb partial that does something like this:

<% unless current_user?(@user) %>
  <% if current_user.likes?(@post) %>
    $("#post_form").html("<%= escape_javascript(render('posts/unlike'))%>");>
  <% else %>
    $("#post_form").html("<%= escape_javascript(render('posts/like'))%>");
  <% end %>
<% end %>  

Basically I believe you're seeing no change because you're making an AJAX POST, but not doing anything with the result. You would need JavaScript that updates the innerHTML of a DOM element with the result of your post.

This post might be helpful: http://www.stjhimy.com/posts/7-creating-a-100-ajax-crud-using-rails-3-and-unobtrusive-javascript