Button doesn't update in Ajax - Rails Tutorial 3 at §12.2.5

Question

I'm going through the Rails Tutorial by Michael Hartl and hit a small snag at §12.2.5 where we're supposed to create a working button with Ajax. I know the code is correct (I wound up copying it directly from the book and retyping it three times) and I'm green. But it doesn't actually work!

Through this part of the tutorial we are changing a regular form submit button to work with Ajax so that the entire page doesn't "refresh" (really, redirect to the same page) and instead just the button and a corresponding sidebar item update. The problem is the button doesn't automatically reload upon clicking as I'm expectng. It does reload upon a page refresh. If I disable JS in my browser, it reverts - as it should - to the HTML version that triggers a redirect and "refreshes" the entire page. If you're wondering, I've tried refreshing the page and I've tried Firefox, Safari and Chrome and Chrome in Incognito. I've shut down and restarted the rails server, spork and autotest. And I've rewritten all the code and then copied all of the book's code. Still stumped.

So even though the test is green I have an imperfectly working function. Maybe there's something I'm missing and you can help me find it? Maybe I'm missing a javascreipt-related gem, an Ajax gem...

Relevant parts of the code:

relationships_controller.erb:

class RelationshipsController < ApplicationController
  before_filter :authenticate

  def create
@user = User.find(params[:relationship][:followed_id])
current_user.follow!(@user)
respond_to do |format|
  format.html { redirect_to @user }
  format.js
end

end

  def destroy
@user = Relationship.find(params[:id]).followed
current_user.unfollow!(@user)
respond_to do |format|
  format.html { redirect_to @user }
  format.js
end
end
end

_follow.html.erb:

<%= form_for(current_user.relationships. build(:followed_id => @user.id), :remote => true) do |f| %> <%= f.hidden_field :followed_id %>
<%= f.submit "Follow" %> <% end %>

_unfollow.html.erb:

<%= form_for(current_user.relationships.find_by_followed_id(@user),
         :html => { :method => :delete },
         :remote => true) do |f| %>

<% end %>

create.js.erb

$("follow_form").update("<%= escape_javascript(render('users/unfollow')) %>")
$("followers").update('<%= "#{@user.followers.count} followers" %>')

destroy.js.erb

$("follow_form").update("<%= escape_javascript(render('users/follow')) %>")
$("followers").update('<%= "#{@user.followers.count} followers" %>')

I also made sure that this line is included in the application.html.erb

<%= javascript_include_tag :defaults %>

If there's anything else you need to assess the situation, please ask and I'll respond with an update.

TIA

Answer 1

what version of rails are you using? If its 3.1 you have to change

create.js.erb to:

$("#follow_form").html("<%= escape_javascript(render('users/unfollow')) %>")
$("#followers").html('<%= "#{@user.followers.count} followers" %>')

and destroy.js.erb to:

$("#follow_form").html("<%= escape_javascript(render('users/follow')) %>")
$("#followers").html('<%= "#{@user.followers.count} followers" %>')

(Notice the extra #) Its on the last chapter of the tutorial, the notes of changing to rails 3.1