问题
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
回答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
回答2:
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.com/railstutorial/topics/ajax_follow_button_not_working_in_section_12
回答3:
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".
回答4:
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
回答5:
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
来源：https://stackoverflow.com/questions/6156815/button-doesnt-update-in-ajax-rails-tutorial-3-at-12-2-5