質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.48%

  • JavaScript

    17076questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • Ruby on Rails

    7513questions

    Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

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

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 3,247

ShotaKomatsu

score 13

期待している動作としては、パーシャル部分をボタン押下によって切り替える処理をしたいと思っています。
しかし、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]

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

+1

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/04/08 14:50 編集

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

    キャンセル

  • 2016/04/08 14:53

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

    キャンセル

  • 2016/04/08 14:57 編集

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

    キャンセル

  • 2016/04/08 15:26

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

    キャンセル

  • 2016/04/08 16:39

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

    キャンセル

  • 2016/04/08 16:46

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

    キャンセル

  • 2016/04/08 16:58

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

    キャンセル

  • 2016/04/08 17:55

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

    キャンセル

  • 2016/04/08 18:05

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

    キャンセル

  • 2016/04/08 18:41

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

    キャンセル

  • 2016/04/09 02:29

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

    キャンセル

  • 2016/04/09 02:44

    <%= 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が働いていないかもしれません。

    キャンセル

  • 2016/04/09 02:48

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

    キャンセル

  • 2016/04/09 07:17

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

    キャンセル

  • 2016/04/09 11:09

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

    キャンセル

  • 2016/04/10 12:08 編集

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

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

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

    キャンセル

0

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/04/14 10:26

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.48%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • JavaScript

    17076questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • Ruby on Rails

    7513questions

    Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。