10

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

5 Answers 5

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

3

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

1

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".

0

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

2
  • use a tool like firebug (with firefox) or the developer tools that comes with chrome to get a better look at what's going on. For example, if you use chrome on a mac hit command-option-i to bring up developer tools. click the 'console' tab then try clicking whatever fires your ajax. if there are js errors you'll see them here. in the past, i found that my ajax requests were not formatted properly causing js to throw errors. i was looking for problems in rails but the problem was actually in the ajax response and the browser was catching it, not rails (so it wasn't showing up in my logs)
    – Dty
    Jun 6, 2011 at 4:20
  • Humbledaisy, were you able to solve it? I have the same issue here - the result returned from Rails (which I confirmed using an http sniffer) doesn't trigger the change, but if you paste the code on the debugger it works. I'm puzzled.
    – chesterbr
    Aug 13, 2012 at 14:45
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.