[Rails] いいねボタンの非同期通信がうまくいきません

Question

前提

Railsで非同期通信を用いて、いわゆるいいね機能を実装しようとしています。
（下記のコードでは「いいね」という名前ではなく、モデルはerai、ボタンの表示されているテキストも「えらい」という名前の付け方をしています。）

生じている問題

えらいボタンで非同期通信が実現できません。
ボタンを押してもボタンの表記は変わらず、リロードすると表記は変わります。

おそらくは非同期機能に関わる記述に問題があるのでしょうが、ほぼ同じ構造のいいね機能を既に実装できていることもあり、問題の特定にてこずっています。

何かお気づきの方がいらっしゃれば、お声がけいただけると幸いです。

###ソースコード

_erai.html.erb

<% if logged_in? %>
  <% erai = @progress.erais.find_by(user_id: current_user.id) %>
  <div id="erai_button_<%= @progress.id %>">
    <% if @progress.has_erai?(current_user) %>
      <div class="erai">
        <div class="row">
          <div class="col-md-4 offset-md-4">
            <%= button_to 'えらい済', post_progress_erai_path(post_id: @post.id, progress_id: @progress.id, id: erai.id), class: 'btn btn-outline-info', id: 'unerai-button', method: :delete, remote: true %>
            <%= @progress.erais.count %>
          </div>
        </div>
      </div>
    <% else %>
      <div class="unerai">
        <div class="row">
          <div class="col-md-4 offset-md-4">
            <%= button_to 'えらい', post_progress_erais_path(post_id: @post.id, progress_id: @progress.id), class: 'btn btn-outline-info', id: 'erai-button', method: :post, remote: true %>
            <%= @progress.erais.count %>
          </div>
        </div>
      </div>
    <% end %>
  </div>
<% end %>

destroy.js.erb

$('#erai_button_<%= @progress.id %>').html("<%= j(render partial: 'erais/erai', locals: {progress: @progress, user: @user}) %>");

create.js.erb

$('#erai_button_<%= @progress.id %>').html("<%= j(render partial: 'erais/erai', locals: {progress: @progress, user: @user}) %>");

routes.rb

Rails.application.routes.draw do
  get 'erais/create'
  get 'erais/destroy'
  root to: 'home#top'
  get '/signup', to: 'users#new'
  get '/posts/search', to: 'posts#search'
  get '/login', to: 'sessions#new'
  post '/login', to: 'sessions#create'
  delete '/logout', to: 'sessions#destroy'
  resources :users
  resources :posts do
    resources :likes, only: [:create, :destroy]
    resources :wakarus, only: [:create, :destroy]
    resources :progresses, only: [:new, :create, :show, :edit, :update, :destroy] do
      resources :erais, only: [:create, :destroy]
    end
  end
  resources :notifications, only: [:index]
end

erais_controller.rb

class EraisController < ApplicationController
  include SessionsHelper

  def create
    erai = Erai.new(user_id: current_user.id, progress_id: params[:progress_id])
    erai.save
    @user = User.find_by(id: current_user.id)
    @progress = Progress.find_by(id: params[:progress_id])
    # @progress.create_notification_erai!(current_user)
  end

  def destroy
    erai = Erai.find_by(progress_id: params[:progress_id], user_id: current_user.id)
    erai.destroy
    @user = User.find_by(id: current_user.id)
    @progress = Progress.find_by(id: params[:progress_id])
  end
end

progress_controller.rb

class ProgressesController < ApplicationController
  include SessionsHelper
  before_action :logged_in_user, only: [:create, :destroy]

  def new
    @post = Post.find_by(id: params[:post_id])
    @progress = Progress.new
  end

  def create
    @post = Post.find_by(id: params[:post_id])
    @progress = @post.progresses.new(progress_params)
    if @progress.save
      flash[:success] = '進捗を記録しました'
      redirect_to posts_url
    else
      render 'new'
    end
  end

  def show
    @post = Post.find_by(id: params[:post_id])
    @user = @post.user
    @progress = Progress.find_by(id: params[:id])
  end

  def edit
    @post = Post.find_by(id: params[:post_id])
    @progress = Progress.find_by(id: params[:id])
  end

  def update
    @post = Post.find_by(id: params[:post_id])
    @progress = Progress.find_by(id: params[:id])
    if @progress.update(progress_params)
      flash[:success] = '進捗を更新しました'
      redirect_to @post
    else
      render 'edit'
    end
  end

  def destroy
    Progress.find_by(id: params[:id]).destroy
    flash[:success] = '進捗を削除しました'
    redirect_to posts_url
  end

  private

    def progress_params
      params.require(:progress).permit(:content)
    end
end

【追記】

show.html.erb

<h1>進捗詳細</h1>

<%= @progress.content %>

<%= render 'erais/erai' %>

<% if @user == current_user %>
  <%= link_to '編集', edit_post_progress_path, class: 'btn btn-primary mr-3' %>
  <%= link_to '削除', post_progress_path, method: :delete, data: {confirm: 'この進捗を削除します。よろしいですか？'}, class: 'btn btn-danger' %>
<% end %>

Comments

[winterboum]

partial: 'erais/erai'　のcodeを。
それと
'#erai_button_<%= @progress.id %>'　はどこでしょう？見当たらない。

[winterboum]

あ、partial: 'erais/erai'　は一番上の長いやつか

Answer 1

'#erai_button_<%= @progress.id %>'　はどこでしょう？見当たらない。
<%= button_to 'えらい', 　は　id: 'erai-button' なので違います。
ここを勘違いしていないかな？

partial: 'erais/erai'　が最初の長いやつだとすると、create.js.erb　にて 'erais/erai'を使って'#erai_button_<%= @progress.id %>'を上書きするとなると、partial: 'erais/erai'の外側のviewを見る必要がありますね。

Comments

[hitoyasablue]

ご回答ありがとうございます。
'#erai_button_<%= @progress.id %>'は_erai.html.erbの3行目で定義をしています。
partial: 'erais/erai'は仰る通り_erai.html.erbです。

[hitoyasablue]

自己解決に至りました。ありがとうございました。

Answer 2

_erai.html.erb8行目の
post_progress_erai_path(post_id: @post.id, progress_id: @progress.id, id: erai.id) を
post_progress_erai_path(progress_id: @progress.id, id: erai.id) に修正したところ、非同期通信が実現されました。

2段階ネストしたパスを使う際に、引数として3つ分のidを与えていたことが原因でした。