質問: ### Twitterのタイムラインを表示するWebアプリをrailsで作っています。 Twitterのタイムラインを表示するWebアプリをrailsで作っています。 タイムライン表示のページで、submitボタンであるAPIにポストすると追加のツイート(過去のツイート)が新たなDOM要素として追加で表示されるようにしているのですが、DOMが挿入されません。 これはインスタンス変数の特定のハッシュ([:text]のこと、ツイート本文が代入されている)を挿入し、かつそれにRubyのeachを使った時だけに起こります。 ### 該当のソースコード タイムラインを表示させるページ(user_home.html.erb) ``` Pages#user_home <%= @current_user.screen_name %> <%= session.blank? %> <% @timeline_tweets.each do |tweet| %> <%= tweet[:screen_name] %> <%= tweet[:created_at].getlocal.strftime("%Y-%m/%d-%X") %> <%= tweet[:text] %> <%= tweet[:favorite_count] %> <%= tweet[:avg_fav] %> hogehoge <% end %> <%= form_tag('/pages/Additional_loading', remote: true) do %> <%= hidden_field_tag :token, @current_user.token %> <%= hidden_field_tag :secret, @current_user.secret %> <%= submit_tag("さらにツイートを読み込む") %> <% end %> ``` タイムラインを表示させるページに追加のツイート(過去のツイート)と表示させるJquery(Additional_loading.js) ``` $('#result').append("<% @additional_timeline_tweets.each do |tweet| %>"); $('#result').append(" <%= tweet[:text] %> "); $('#result').append("<% end %>"); ``` ### 色々検証してきたことを箇条書きにします 1Chromeで確認すると、ボタンを押しても(新たなツイートを挿入する)DOM要素自体が挿入されていなかった 2(Additional_loading.js) @additional_timeline_tweets に値が問題なく代入されていることは確認した 3(Additional_loading.js) @additional_timeline_tweetsは追加のツイートを格納する配列ハッシュ変数であり、ツイート本文・ツイートしたユーザid・お気に入り数・リツイート数など様々なものがハッシュとして入っている。そして、ツイート本文([:text])以外であればAdditional_loading.jsは問題なく動いた。例えば ``` $('#result').append("<% @additional_timeline_tweets.each do |tweet| %>"); $('#result').append("<%= tweet[:user_name] %> <%= tweet[:favorite_count] %> <%= tweet[:retweet_count] %>"); $('#result').append("<% end %>"); ``` このようにすれば問題なくDOM要素は挿入されて表示される。 4(Additional_loading.js) eachを使わなければツイートの本文([:text])を表示させることはできた。例えば ``` $(#result).append("@additonal_timeline_tweets[0][:text]") ``` このように書き換えればツイートの本文は表示される。(先述した@additional_timeline_tweetsが問題なく値が代入されていることの証拠でもある) 5(Additional_loading.js) ``` $('#result').append("<% @additional_timeline_tweets.each do |tweet| %>"); $('#result').append("<%= tweet[:text].blank? %>"); ``` こうしても問題なくDOM要素は挿入され、表示はfalseとなった。 ### 最後に つまりeachを使ってツイート本文を表示するものをJqueryで挿入しようするとうまくいかないわけです。 拙い文章なのでわかりにくい部分があるかもしれません。情報の追加・修正の依頼は大歓迎です。 どうすれば治るか、代替案としてどのようなものが考えられるかなど教えていただきたいです。 ご助力お願いします。 ### 補足情報(言語/FW/ツール等のバージョンなど) rails 4.2.7.1 jquery-rails 最新版
回答: jQueryで挿入する際、erbの記法は使用できないと思います。 画面が表示された時点で、すでにRubyの世界からは離れてしまっていますので、 そこから先はJavaScript(jQuery)のみで処理する必要があります。 以下、実装例を記載しておきます、ご参考までに! ツイートの取得方法ですが、すでにRubyのgemか何かで取得できているように見えるので、まずはjson形式などでレスポンスを返すようなコントローラメソッドを作ってみるといいと思います。 なぜjson形式を推しているのかは、Javascriptで処理しやすいからという理由だけです。 jQueryのAjaxでツイート取得のコントローラメソッドを呼び、ツイート情報がjsonで返ってくるので、それをjavascriptで処理します。一つ一つをHTMLコードに書き換えたうえでappendして下さい。 そうすればご希望通りの動きが確認できるはずです。