Railsでcreate.js.erbが動かない為、どこに問題があるか知りたい

Question

期待している動作としては、パーシャル部分をボタン押下によって切り替える処理をしたいと思っています。
しかし、create.js.erbでのJavascript部分が動作していないようです。(
「render('likeideas/like_idea', idea:@idea」部分は正常に動いていますが、パーシャル部分が切り替わりません。）
どこに問題があるのかご教授いただけないでしょうか。

view.html.erb(ideaという変数を使用しています。）

            <td class = "right-ideas" style=" width: 10%" >
              <div class = "icon">
                <% if idea.like_idea_find_by(current_user) %>
                    <%= render partial: 'likeideas/like_idea', locals: { idea: idea}  %>
                <% else %>
                    <%= render partial: 'likeideas/notlike_idea', locals: { idea: idea}  %>
                <% end %>
              </div>
            </td>

_like_idea.html.erb（Destroyメソッドを読んでいます。）

<%= link_to likeidea_path(id: Likeidea.find_by(idea_id: idea.id,user_id:current_user), idea_id: idea.id ) , :class => "like-icon",:id => "#{idea.id}", :remote => true, :method => :delete do %>
    <span class="like-icon"><%= fa_icon "heart" %></span>
<% end %>
<%= idea.likeideas.count %>

_notlike_idea.html.erb（createメソッドを読んでいます。）

<%= link_to likeideas_path( idea_id: idea.id ) , :class => "notlike-icon",:id => "#{idea.id}", :remote => true, :method => :post do %>
    <span class="notlike-icon"><%= fa_icon "heart" %></span>
<% end %>
    <%= idea.likeideas.count %>

controller

  def create
    @idea = Idea.find(params[:idea_id])
    likeidea = current_user.likeideas.build do |t|
      t.idea_id = params[:idea_id]
    end

    if likeidea.save
    else
    end

  end
  def destroy
    @idea = Idea.find(params[:idea_id])
    if Likeidea.delete(params[:id])
    else
    end
  end

create.js.erb

$("#<%= @idea.id %>").replaceWith("<%= escape_javascript(render('likeideas/like_idea',  idea:@idea )) %>");

destroy.js.erb

$("#<%= @idea.id %>").replaceWith("<%= escape_javascript(render('likeideas/notlike_idea',  idea:@idea )) %>");

routes

  resources :likeideas, :only => [:create, :destroy]

よろしくお願いいたします。

Answer 1

この手のエラー、原因の切り分けに結構困りますよね。
私の場合、以下の手順でチェックしてみます。

1．JSがきちんと呼び出されているか、console.logとかを使ってチェック
2．JSの操作対象である要素IDがきちんと存在しているか、重複したりしていないかチェック
3．操作対象セレクタが正しく操作できるか、背景色を変えるなどの操作をして見てチェック
4．置き換え対象のレンダラが正しくレンダリングされているかチェック

ざっと見たところ、JSで呼び出しているescape_javascript(render~のあたりが怪しそうな気がします。

Comments

[Test_ks]

回答ありがとうございます。
create.js.htmlの中身をalert("hello");と変えてもAlertが出てこない為、原因は、create.js.jtmlだと思うのですが、なぜ、ここだけJavascriptが動かないのか不明です。
上記の手順では、やって見ましたが、動きませんでした。

[rifuch]

怪しそうなところを外してましたね。
create.js.htmlが呼び出されていないという事で気づきましたが、 ファイル名はcretate.js.erbじゃないとだめな気が･･･

[Test_ks]

上記のファイル名が間違っていました。実際のファイル名はcreate.js.erbで行っています。また、ログには、
Rendered likeideas/_like_idea.html.erb (3.4ms)
Rendered likeideas/create.js.erb within layouts/application (15.8ms)
と表示されているので、呼びだされてはいると思います。

[rifuch]

上記1〜4全て問題なしでしたか?

[Test_ks]

はい、上記1〜4は問題は無かったです。

[rifuch]

3まできちんとブラウザ上で確認出来ていて、さらに4も大丈夫で、きちんと動かない、というのは不可解ですね･･･
試しに、DOMをリプレースするんじゃなくて、どこかにappendするとかしてそれがきちんとブラウザ上で再現できるか見てみては?

[Test_ks]

単純に、create.js.erbの中にalert("hello");とかいてもブラウザでは再現しませんでした。

[rifuch]

あー、それは、1．のチェックがすでに問題かもしれないと。
create.js.erbの中身を全て削除して、alert("hello");だけにするとか、
console.log('hello");だけにするとかで呼び出されているか確認出来ませんか?
他のJSコードが原因で全部こけてる可能性はないですか?

[Test_ks]

create.js.erbをalert("hello");だけにして見ましたが、呼びだされませんでした。ログには、
Rendered likeideas/create.js.erb within layouts/application (0.5ms)
と書かれており、render は正しく行われているようです、

[Test_ks]

create.js.erbは呼ばれているが、その内部に記述されたJavascriptは実行されていないようですが、何が原因か分かりますでしょうか？

[rifuch]

within layouts/applicationが気になりますね。
remoteでの呼び出しは、レイアウトが考慮されないはずなのですが･･･

[rifuch]

<%= link_to likeidea_path(id: Likeidea.find_by(idea_id: idea.id,user_id:current_user), idea_id: idea.id ) , :class => "like-icon",:id => "#{idea.id}", :remote => true, :method => :delete do %>の順序を入れ替えて、<%= link_to likeidea_path(id: Likeidea.find_by(idea_id: idea.id,user_id:current_user), idea_id: idea.id ) , :remote => true, :method => :delete, :class => "like-icon",:id => "#{idea.id}" do %>にしてみたらどうなりますか?
もしかすると、オプションの順序がurl_optionとhtml_optionでごっちゃになっているせいで、うまいことurl_optionであるremote: trueが働いていないかもしれません。

[rifuch]

link_toにきちんとオプションが渡っているかどうかは、ブラウザでレンダリングされたソースを確認して、対象のaタグにdata-remote="true"の属性があるかで判断できます

[Test_ks]

aタグにはそのままでもdata-remote="true"がありますね。

[rifuch]

ソース上の原因じゃない気がしてきました。
Ajax以外でJSはきちんと動きますか?
ここにあるのを試してみたらどうでしょう?
http://qiita.com/kumagi/items/289ccadf344f32613304

[Test_ks]

上記のサイトを参考に既に試しています。他のJavaScriptの処理も試しては見たのですが、正常に動きました。（HeaderとBody共にJavascriptを追加して確認しました。また、CoofeeScriptを呼び出しての処理も正常に動きます。）また、TurbolinkをOffにして実行もしているのですが、動きません。

仮にソース上の問題で無く、Turbolinkの問題でも無いケースであるとどこに問題があるのか検討が付かない状態です。

何か思い当たりますでしょうか。

Answer 2

application.html.erbとすべき箇所をapplication.erbとしていたため。ソース自体の問題では無かった。

Comments

[rifuch]

無事解決して良かったです。
お役に立てず、申し訳ありません。