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

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

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

Share Improve this question asked May 27, 2011 at 19:27 Paul 2,3441 gold badge15 silver badges11 bronze badges

Add a ment |

5 Answers 5

Sorted by: Reset to default 6

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

Change <%= javascript_include_tag :defaults %> to <%= javascript_include_tag 'prototype' %> in the application.html.erb file, this resolved the issue for me.

See link:

http://getsatisfaction./railstutorial/topics/ajax_follow_button_not_working_in_section_12

I' using Rails 3.1.1 and had the same issue following the Rails 3.0 tutorial. In the version update Rails has moved away from Prototype and started using jQuery. To correct the old version of the javascript I had to update the create/destroy.js.erb.

You can read about it in chapter 13. It boils down to adding a "#" in front of your tag id, and replacing the ".update" call with ".html".

I have been banging my head against the same issue. I do not have a solution yet, but I thought I might be able to move the ball forward with some of what I have tried.

The most likely lead is this. In trying to simplify things I have tried to eliminate the jQuery code itself. To do this, I have used Safari's Inspect Element/scripts console to test the scripts on the page.

I decided to go with the innocuous

$('title').text("Create")

Putting this is the Safari console changes the title. Putting it in my create.js.erb and my destroy.js.erb files does not work however (when I click on the follow/unfollow button). My logs are showing that the appropriate relationships/destroy.js.erb view is being called but the element does not refresh (and the page does not reload).

Rendered layouts/_stylesheets.haml (3.3ms)
Rendered layouts/_header.haml (6.1ms)
Rendered layouts/_footer.haml (3.8ms)
Rendered relationships/destroy.js.erb within layouts/application (34.8ms)
Completed 200 OK in 132ms (Views: 39.0ms | ActiveRecord: 1.3ms)

It is the last thing to load. My relationships_controller is the same as above. My forms are the same as the book (but in haml) and I have replaced the haml with that which is posted on hartl's github haml branch.

So, my supposition is that the create.js.erb and destory.js.erb files are being loaded but not executed for some reason. Does anyone have any ideas what to try next to diagnose/resolve this?

Thanks,

Dave

Ive had this issue recently with Rails 4

run the webserver, click on the follow / unfollow then go back to your webserver logs

look up the error

I had a render error ID NIL

because I had updated the variable @user in relationships_controller.erb for the end of the code but NOT on the first line where I defined it

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

fixed with

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

same again for destroy - so update all instances of user with @user

cheers

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

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

5 Answers 5

与本文相关的文章

评论列表(0)