【Rails5】javascript内でrenderを利用

Question

###全体の流れ
0. Ajaxで投稿
0. Jsonを受け取る
0. 投稿内容（Json）を画面遷移or全体再読み込みなしで表示
0. 紐づくいいねボタン←今回の質問です。

###実現したいこと
js側でrender機能を利用

###わからないこと
全体の流れ、3に対して_like.html.erbをどのように読み込ませるかが、わからないです。

###発生している問題
js側でrenderされるはずもなく、文字列が表示されます。

<%= escape_javascript render partial: 'likes/like', locals: { micropost: micropost, likes: @likes } %>

###該当のソースコード

//_micropost.html.erb
<li id="micropost-<%= micropost.id %>" class="time-label <%= micropost.like_user(current_user.id)? "liked" : "unlike" %>">
  <div class="timeline-item">
    <% if current_user?(micropost.user) %>
      <div class="dropdown time">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><span class="caret"></span></a>
        <ul class="dropdown-menu" role="menu">
          <li>解決済みにする</li>
          <li><%= link_to "投稿を削除", micropost, method: :delete,
                               data: { confirm: "本当に削除してよろしいですか？" } %></li>
        </ul>
      </div>
    <% end %>
    <span class="time">リクエスト中</span>
    <h3 class="timeline-header"><%= link_to micropost.user.name, micropost.user %> <%= micropost.created_at.to_s(:human) %></h3>
    <div class="timeline-body">
      <%= text_url_to_link(h(micropost.content)).html_safe %>
      <%= image_tag(micropost.picture.url, class: 'img-responsive') if micropost.picture? %>
    </div>
    <div class="timeline-footer">
      <div class="request-actionList">
        <%= render partial: 'likes/like', locals: { micropost: micropost, likes: @likes } %>
        <span data-toggle="tooltip" title="コメント"><%= link_to(content_tag(:i, '', class: 'fa fa-comment-o'), micropost_path(micropost), remote: true) %></span>
      </div>
    </div>
  </div>
</li>

//microposts.js
$('#new_micropost').on('ajax:success', function(e, data) {
  	console.log(data);
    $('.timeline').prepend($('<li id="micropost-'+ data.id +'"></li>')
    	.append($('<div class="timeline-item"></div>')
    		.append($('<h3 class="timeline-header"></h3>').append(data.user_id))
    		.append($('<div class="timeline-body"></div>').append(data.content))
    		.append($('<div class="timeline-footer"><div class="request-actionList"></div></div>').append("<%= escape_javascript render partial: 'likes/like', locals: { micropost: micropost, likes: @likes } %>")))
    );
  });

###補足情報
【環境】
・Mac OS Sierra
・Ruby Version 2.4.1
・Ruby on Rails 5.0.3

【自分のレベル】
※チュートリアルを一通り終え、チュートリアルを読み返しつつ参考書でRailsを勉強中です。至らない点が多いと思いますが、何卒よろしくお願い致します。

Answer 1

like.html.erbではなくlike.js.erbを使って、このファイルにJSを書きます。

def like
  respond_to do |format|
    if @model.save
      format.html
      format.js
    end
  end
end

コントローラの一例ですが、Ajaxでlikeアクションが呼ばれたら、format.jsだけが反応して、like.js.erbをブラウザに返す仕組みになってます。
ブラウザのJSはレスポンスをJSとして実行するはずです。

Comments

[ssk]

NCC1701様

大変、お返事が遅くなってしまい申し訳ございません。
ご回答、誠にありがとうございます。