賛成ボタンを入れたとき、MVCの流れを知りたいです！！

Question

質問（追記）

app/views/agrees/create.js.erbはmvcの動きの中で、どのタイミングで呼び出されるのでしょうか。
また、dbへ値をcontrollerのcreateアクションで渡した後に、呼び出すことは可能ですか。

自分なりに考えてみたこと

app/views/articles/show.html.erbにおけるjqueryがうまく作動しないことが原因だと思います。反対についても同じ構造なので、割愛します。イメージとしてはteratailにおける高評価と低評価をイメージしています。

コード

app/models/article.rb

class Article < ApplicationRecord
    has_many :votes, dependent: :destroy
    def vote_user(user_id)
        votes.find_by(user_id: user_id)
    end
    def agree_user(user_id)
        votes.find_by(user_id: user_id, agree:1)
    end
end

app/models/user.rb

class User < ApplicationRecord
  has_many :votes, dependent: :destroy
end

app/models/vote.rb

class Vote < ApplicationRecord
  belongs_to :user
  belongs_to :article
end

app/views/articles/show.html.erb

<div id="agree_button_<%= @article.id %>">
     <%= render partial: 'votes/agree', locals: { article: @article, votes: @votes} %>
</div>

app/views/votes/_agree.html.erb

  <% unless article.vote_user(current_user.id).blank? %>
    <% if article.agree_user(current_user.id) %>
      <%= link_to neutral_path(article.id), method: :patch, remote: true do %>
        <i class="far fa-grin fa-2x"　style="color:	#FFAAFF;"></i>
      <% end %>
    <% else %>
      <%= link_to agree_update_path(article.id), method: :patch, remote: true do %>
        <i class="far fa-grin fa-2x"　style="color:#FFDDFF;"></i>
      <% end %>
    <% end %>
  <% else %>
    <%= link_to agree_path(article.id), method: :post, remote: true do %>
      <i class="far fa-grin fa-2x" style="color:#FFDDFF;"></i>
    <% end %>
  <% end %>

app/views/votes/agree.js.erb

$('＃agree_button_<%= @article.id %>').html("<%= j(render partial: 'votes/agree', locals: {article: @article, votes: @votes}) %>");
alert('agree呼ばれた！！');

ここのalert('agree呼ばれた！！');が初めはうまく作動していたのですが途中から作動しなくなりました。

app/controllers/agrees_controller.rb

class AgreesController < ApplicationController
  before_action :set_variables

  def create
    @vote = Vote.create(agree: 1, disagree: 0, user_id: current_user.id, article_id: params[:article_id])
    @votes = Vote.where(article_id: params[:article_id])
    @article.reload
  end
  
  def update
    vote = Vote.find_by(user_id: current_user.id, article_id: params[:article_id])
    vote.update(agree: 1, disagree: 0)
    @votes = Vote.where(article_id: params[:article_id])
    @article.reload
  end

  private
  def set_variables
    @article = Article.find(params[:article_id])
  end
end

config/routes.rb

Rails.application.routes.draw do


  post   '/agree/:article_id' => 'agrees#create',   as: 'agree'
  patch   '/agree/:article_id' => 'agrees#update',   as: 'agree_update'



end

追記

おそらく、js.erbのファイルの置き場所とファイル名なども関係しているとは思います。
js.erbファイルがhtmlファイルのidもしくはクラスをどのように識別しているのか、
自分の理解が浅いかもしれません。

どうぞよろしくお願いします。

一度解決済にしたが、誤っていた内容

コントローラーの@article.reloadを

    redirect_to "/articles/#{@article.id}"

に変更することで解決できました。

redirect_toに関するこちらのサイトが参考になりました。

redirect_toを使うと当然でしたが、ページ全体が更新されてしまって、js.erbが呼び起こされませんでした。

Answer 1

app/views/agrees/create.js.erbはmvcの動きの中で、どのタイミングで呼び出されるのでしょうか。

通常であればcreateアクションのあとに呼び出す形となります。

また、dbへ値をcontrollerのcreateアクションで渡した後に、呼び出すことは可能ですか。

可能です。

設定方法としては、formにremote: trueを追記します。
※form_withを利用している場合はデフォルトでremote: trueが有効です。それ以外は設定する必要があります。

その後、AgreesController#createで下記のような形で設定すれば期待通りの動きができるかと思います。

  respond_to do |format|
    if @user.save
      format.js
    else
      format.html { render action: "new" }
    end

詳しいことはこちらをご確認ください。
Railsガイド：RailsでJavaScriptを利用する。シンプルな例

Comments

[jack_kanzaki]

ご回答ありがとうございます。

[jack_kanzaki]

html.erb => controller.rb => js.erbという流れだったんだな、と今気付きました。

[no1knows]

解決してよかったです！

あと関係ないですが、現在のコードではStrong Parameterを利用していないためセキュリティ的に問題があります。
もし意図してやっているのであれば以下はスルーして下さい。

Railsの初学者であればおすすめは、まずscaffoldを実行することをおすすめします。
理由はRailsのレールに乗った実装のお手本はセキュリティ対策も含めてscaffoldだからです。

そしてscaffoldを実行してできたファイルをやりたいことが実現できるように変更していく形が望ましいです。
その中で下記のようなサイトでどのコードが何をしているかきちんと理解できるようになるとぐっと理解が深まるかと思います。
http://kanjihtmt.github.io/blog/2015/04/02/scaffold/

結果としてチームで開発するときにでもRailsのレールに乗ったわかりやすいコードになるのでメリットが多いかと思います。

[jack_kanzaki]

strong parameterに関して、意識して開発してみます。
ご指摘、本当にありがとうございます！！

Answer 2

favorites_controller.rbのcreateアクションが呼ばれた時はviews/favorites/create.js.erbが呼ばれます。

他のコントローラの時も同様で、
posts_controller.rbのindexアクションが呼ばれた時は
views/posts/index.js.erbが呼ばれます。
※ファイルがあれば呼び出されます。

Ajaxを用いて非同期いいねを実装

にあるようにしてjqueryをうまく作動させることに成功しました。

あとは、@article.reloadを作動させることが課題です。