Question

I’m following the RoR 3 Rails Tutorials, but to upgrade to a newer version I went for a different stack, using Rails 3.1 instead of 3.0.11.

I read the release notes and discovered the asset pipe and other improvements.
I also noticed that jQuery is now the default javascript framework included (was prototype framework before).

Unfortunately I was not able to find any answer to my question.

No Ajax calls are working properly using Rails 3.1?

When action is submitted it is suppose to:

1. generate a request that do the appropriate action
2. update only the appropriate div to update the page with the result of the Ajax call

Unfortunately, pt 2 is not working. The request get generated and the action is properly done (db is updated), but the page never update.

I’m guessing it’s either something related to include of javascript lib or inappropriate javascript erb update code.

Following is the html erb view code

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

and my js erb code that is supposed to update the div after the Ajax request has been submitted

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

The controller action is the following

    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

Checking the log file of the webserver I can easily locate the line where the js erb gets call and rendered

    Started POST "/relationships" for 127.0.0.1 at 2012-01-20 10:12:51 +0100
      Processing by RelationshipsController#create as JS
      Parameters: {"utf8"=>"✓", "authenticity_token"=>"htCzq+KZUkwVfLZmSx48OR5sSphQTE0rs0fFiX1ZJbg=", "relationship"=>{"followed_id"=>"6"}, "commit"=>"Follow"}
      User Load (0.4ms)  SELECT "users".* FROM "users" WHERE "users"."id" = 1 LIMIT 1
      User Load (0.3ms)  SELECT "users".* FROM "users" WHERE "users"."id" = $1 LIMIT 1  [["id", "6"]]
       (0.2ms)  BEGIN
      SQL (104.1ms)  INSERT INTO "relationships" ("created_at", "followed_id", "follower_id", "updated_at") VALUES ($1, $2, $3, $4) RETURNING "id"  [["created_at", Fri, 20 Jan 2012 09:12:51 UTC +00:00], ["followed_id", 6], ["follower_id", 1], ["updated_at", Fri, 20 Jan 2012 09:12:51 UTC +00:00]]
       (0.9ms)  COMMIT
      Relationship Load (0.6ms)  SELECT "relationships".* FROM "relationships" WHERE "relationships"."follower_id" = 1 AND "relationships"."followed_id" = 6 LIMIT 1
    Rendered users/_unfollow.html.erb (4.1ms)
       (0.8ms)  SELECT COUNT(*) FROM "users" INNER JOIN "relationships" ON "users"."id" = "relationships"."follower_id" WHERE "relationships"."followed_id" = 6
    Rendered relationships/create.js.erb (9.2ms)
    Completed 200 OK in 251ms (Views: 51.9ms | ActiveRecord: 115.4ms)

Unfortunately the div does not get updated. I went through a lot of answers (emptying public/asset folder in dev, checking asset/application.rb to ensure include of jquery, …) but I run out of ideas. Where should I look to understand the root cause of this issue? Does anyone ever faced that while migrating from Rails 3.0.11 to Rails 3.1 ?

Regards/J.

Answer 1

ok, Im’ not the big jquery wizard, but I used it for similar purpose like this:

$("#cart_container").replaceWith("<%= escape_javascript(render(:partial => 'portal/carts/cart_container')) %>");

or (in case all items with a certain class to be replaced)

$('.carts').replaceWith("<%= escape_javascript(render(:partial => 'portal/carts/carts_table', :locals => {:carts => @carts})) %>")
$('.active_cart').effect("highlight", {color: '#00aa00'}, 500);

So main differences between jQuery and prototype seem to use replaceWith
And the $ function needs # for item id or . to find classes.

So your code should look somehow like this:

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