ajaxの部分テンプレート(EOTD No.15)

1 min read読了の目安(約1300字

こちらAmetaです!

2021年最初のEOTD(Error Of The Day)です。

本日のエラー

インスペクションのconsoleに表示されていたエラー。

rails-ujs.js:216 POST http://localhost:3000/favorite/1 500 (Internal Server Error)

networkからエラーの詳細を確認してみる。。

イベント発火時、ターミナルの方にも同様のエラーが表示されました。

シチュエーション

https://zenn.dev/swata_dev/articles/c51f3b781c916d

↑先日の記事の実装を改めて試みた時に発生したエラー。

シェフをajaxでお気に入り登録する機能。
以下の部分テンプレートをjavascript形式のリクエストで呼び出すようにするように実装しました。

favorites_controllerのcreateアクションを実行した時に、今回のエラー画面が。

<%= link_to image_tag("heart.png", size: '20x20'), create_favorite_path(chef), method: :POST, remote: true %>

このリンクをクリックした時にエラーが発生しました。

考察

エラーメッセージから、favoritesコントローラーのcreateアクションで呼び出しているjsファイルに問題がありそう。

document.getElementById('chef_<%= @chef.id %>').innerHTML = '<%= j(render @chef) %>'

部分テンプレートで置き換えたい場所に'chef_<%= @chef.id %>'というidを振ってあります。

試しに、erbタグ内のrenderをただの文字列に置き換えて実行。
するとイベント発火時に、その文字列が表示されました。

どうやらこのerbタグ内に問題がありそう。インスタンス変数?

@chef = Chef.find(params[:id])

でも@chefはfavoritesコントローラーで指定してある。

うーん。。

Keep on Thinking

現状エラー継続発生中。
今回このエラーについて調べてみると、js.erbタグを使って同じような実装をしている方が困っているようでした。

jqueryを使用すればもっと簡単に上記の実装ができることもあるそうなので、次のアプリケーション開発ではフレームワークメインに挑戦してみます。