jQuery/Rails 3 button does not change state

I have spent a couple of days (like 4) trying to solve this issue. I followed the Hartl Rails 3 tutorial and in chapter 12 tried to convert the site from prototype to jQuery. I am not able to get the "follow"/"unfollow" button to update however.

I am able to issue jQuery commands from within Safari's Inspect Element Console, but if I put even the simplest jQuery command into the destroy.js.erb or create.js.erb files, nothing happens. The log is indicating that the appropriate relationships/destry.js.erb (or create.js.erb) file is rendering.

Here is the code that I have in the controller:

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

The users/_follow.html.haml is

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

The users/_unfollow.html.haml is

- relationship = current_user.relationships.find_by_followed_id(@user)
- delete = { :method => :delete }
  = form_for(relationship, :html => delete, :remote => true) do |f|
  .actions= f.submit "Unfollow"

The users/_follow_form.html.haml is

- unless current_user?(@user)
  #follow_form
    - if current_user.following?(@user)
    = render 'unfollow'
    - else
    = render 'follow'

The relationships/create.js.erb is

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

The relationships/destroy.js.erb is

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

However, in trying to diagnose this, I tr开发者_StackOverflowied a very basic

$("#title").html("Followed")

which also does not work.

Looks like an issue with how you're using jQuery.

jQuery uses CSS-style selectors, while Prototype doesn't. So, to make it work, just add a "#" symbol to the selectors.

Instead of

$("follow_form").html("something");

You should use

$("#follow_form").html("something");
// Note the # symbol in the selector.  
// Also, remember to end your statements with a semicolon.

You can read about jQuery ID selectors here: http://api.jquery.com/id-selector/

Check your public folder for an Assets folder, with application.js in it. Not sure how I ended up with that, but that was causing ajax queries to be processed twice.

It looks like you might be using Rails 3.1. It's important to use the exact gem versions used in the tutorial (including Rails 3.0 instead of 3.1) if want the same results. See the debugging tips at the Rails Tutorial Help page for more suggestions.