Ajax form not rendering partial

Question

I'm trying to implement a follow/unfollow form to create/destroy a relationship between a user, and a company on a site. I'm having problems rendering a new partial on form submit, to change the relationship button from "follow" to "unfollow"

Currently, I render a different partial depending on whether or not a relationship already exists:

`<% unless current_user.id == @company.user_id  %>
 <div id="#relationship">
    <% if current_user.following?(@company)  %>
      <%= render :partial => 'unfollow' %>
    <% else  %>
      <%= render :partial =>  'follow' %>
    <% end %>
  </div>
<% end %>`

The follow partial looks like:

<%= form_for(current_user.relationships.build(followed_id: @company.id), remote: true) do |f| %>
  <div><%= f.hidden_field :followed_id %></div>
  <%= f.submit "Follow",class: "btn-transparent btn-hollow btn-huge" %>
<% end %>

While the unfollow partial looks like:

<%= form_for(current_user.relationships.find_by(followed_id: @company.id), html: { method: :delete }, remote: true) do |f| %>
  <%= f.submit "Unfollow", class: "btn-transparent btn-hollow  btn-huge" %>
<% end %>

These use Create and Destroy methods in my Relationships_Controller:

class RelationshipsController < ApplicationController
  before_filter :authenticate_user!

  def create
    @company = Company.find(params[:relationship][:followed_id])
    current_user.follow!(@company)
    respond_to do |format|
      format.html { redirect_to @company }
      format.js {render layout: false}
    end
  end

  def destroy
    @company = Relationship.find(params[:id]).followed
    current_user.unfollow!(@company)
    respond_to do |format|
      format.html { redirect_to @company }
      format.js{render layout: false}
    end
  end
end

If I set remote: false, the form works as expected, creating and destroying relationships, and the button changes on page reload. When I try to use AJAX by setting remote: true, and use the code below for relationships/create.js.erb and relationships/destroy.js.erb

$("#relationship").html("<%= j render('companies/unfollow') %>");

$("#relationship").html("<%= j render('companies/follow') %>");

However, now when I reload my page - I can click on the button once to create/destroy a relationship object. If I click again, I get a 500 error. The new partial is never loaded.

Although I'm a bit of a noob, this error in seems to point me to this line in the jquery source in chrome dev tools:

xhr.send( ( options.hasContent && options.data ) || null );

I'm using Rails 4, Jquery-Turbolinks and Devise - if any of them bare any relevance to the problem.

Incredibly frustrated now, if anyone could help that would be greatly appreciated!

Update

The log output is below. The first DELETE says that it has rendered my partial, however it has not. The second DELETE is what is happening on clicking unfollow a second time - it rightly points out that the Relationship with that id number no longer exists, as it was deleted on the first action.

Started DELETE "/relationships/429" for 127.0.0.1 at 2014-10-28 14:34:59 +0000
Processing by RelationshipsController#destroy as JS
  Parameters: {"utf8"=>"✓", "commit"=>"Unfollow", "id"=>"429"}
  [1m[36mUser Load (1.0ms)[0m  [1mSELECT  "users".* FROM "users"  WHERE "users"."id" = 1  ORDER BY "users"."id" ASC LIMIT 1[0m
  [1m[35mRelationship Load (0.4ms)[0m  SELECT  "relationships".* FROM "relationships"  WHERE "relationships"."id" = $1 LIMIT 1  [["id", 429]]
  [1m[36mCompany Load (0.3ms)[0m  [1mSELECT  "companies".* FROM "companies"  WHERE "companies"."id" = $1 LIMIT 1[0m  [["id", 1]]
  [1m[35mRelationship Load (0.3ms)[0m  SELECT  "relationships".* FROM "relationships"  WHERE "relationships"."follower_id" = $1 AND "relationships"."followed_id" = 1 LIMIT 1  [["follower_id", 1]]
  [1m[36m (0.2ms)[0m  [1mBEGIN[0m
  [1m[35mSQL (3.6ms)[0m  DELETE FROM "relationships" WHERE "relationships"."id" = $1  [["id", 429]]
  [1m[36m (0.5ms)[0m  [1mCOMMIT[0m
  Rendered companies/_follow.html.erb (2.5ms)
  Rendered relationships/destroy.js.erb (5.3ms)
Completed 200 OK in 19ms (Views: 7.0ms | ActiveRecord: 6.3ms)


Started DELETE "/relationships/429" for 127.0.0.1 at 2014-10-28 14:35:04 +0000
Processing by RelationshipsController#destroy as JS
  Parameters: {"utf8"=>"✓", "commit"=>"Unfollow", "id"=>"429"}
  [1m[35mUser Load (0.9ms)[0m  SELECT  "users".* FROM "users"  WHERE "users"."id" = 1  ORDER BY "users"."id" ASC LIMIT 1
  [1m[36mRelationship Load (0.3ms)[0m  [1mSELECT  "relationships".* FROM "relationships"  WHERE "relationships"."id" = $1 LIMIT 1[0m  [["id", 429]]
Completed 404 Not Found in 4ms

ActiveRecord::RecordNotFound - Couldn't find Relationship with 'id'=429:

Answer 1

You have a hash in the name of your ID.

Try changing

<div id="#relationship">

to

<div id="relationship">

Answer 2

When use remote: true you must change:

format.js{render layout: false}

with

format.js

Otherwise: you never render relationships/create.js.erb and relationships/destroy.js.erb