[Rails5]edit画面をmodalフォームにしたい。

Question

いつもお世話になっております。
環境
CentOS7
virtualbox vagrant
rails5.2.4.1
ruby2.5.1

【やりたいこと】
表題通り、edit画面をmodalフォームにして、submitを押すとupdateアクションが呼ばれるという機能を作りたいです。
具体的に説明すると、、

上の画像のつぼをクリックすると、

（これはデザインを考えるときに作成したphotoshopのスクリーンショットです。
そのため、現状ではこのツボをクリックしてもこのmodal-formは出てきません。）
このようなmodal-formを表示し、アップデートのボタンを押せば、ツボの色が変わるという使用にしたいです。（例えば、サラダ油のツボが黄色だと思いますが、これをクリックしてmodal-formを表示させ青を選択しアップデートする、みたいな感じです）

【試したこと】
https://qiita.com/niwaken/items/ffbce52fb024fd369f24
こちらの記事を参考にbootstrap4を使用して、modalを表示させることはできましたが、自分のやりたいデザインを実現することが難しかったため、javascript jQueryのみでやろうと考えています。

【わからないこと】
index.hrml.erb(1枚目の画像のページ)とedit.js.erbと_form.html.erbを作成し、以下のように記述。
edit.js.erb

$("#flavor-modal").html("<%= escape_javascript(render 'layouts/form') %>")
$("#flavor-modal").modal("toggle")

index.html.erb

<% @flavors.each do |flavor| %>
  <div class="flavor">
    <%= link_to image_tag(@StatusImage[flavor.status]), edit_flavor_path(flavor), remote: true, class: "StatusImage" %>
    <p><%= flavor.name %></p>
  </div>
<% end %>
<div id="flavor-modal"></div>

_form.html.erb https://syncer.jp/jquery-modal-window

# 上のリンクを参考にしました。
<div id="modal-content">
	<%= form_with(model: @flavor, local: true) do |form| %>
        <%= form.radio_button :status, 1 %>
        <%= form.radio_button :status, 2 %>
        <%= form.radio_button :status, 3 %>
    <%= form.submit "アップデート" %>
    <% end %>
<div id="modal-overlay"></div>

application.html.erb

/* start modal test */
#modal-content{
	width:50%;
	margin:1.5em auto 0;
	padding:10px 20px;
	border:2px solid #aaa;
	background:#fff;
	z-index:2;
}

.modal-p{
	margin-top:1em;
}

.modal-p:first-child{
	margin-top:0;
}

.button-link{
	color:#00f;
	text-decoration:underline;
}
 
.button-link:hover{
	cursor:pointer;
	color:#f00;
}
#modal-overlay{
	z-index:1;
	display:none;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:120%;
	background-color:rgba(0,0,0,0.75);
}
/* end modal test */

flavors_controller.rb

    def edit
        @flavor = Flavor.find(params[:id])
    end
    def update
      @flavor = Flavor.find(params[:id])
      @flavor.update(flavor_params)
      if @flavor.status == 1
         @flavors_1 = Flavor.where(status: 1)
         @users = User.all
         user_ids = @users.map(&:id)
         flavor_ids = @flavors_1.map(&:id)
         SeasoningMailer.send_status_1(user_ids, flavor_ids).deliver_later
      end
      @flavors = Flavor.all.order(id: "ASC").page(params[:page]).per(10)
      redirect_to flavors_path
   end

現状はツボをクリックしても反応しないです。。。
もしわかる方がいればご教示いただければ幸いです。
よろしくお願い致します。

Comments

[hatsu]

アップデートボタンのあるコードと
アップデートアクション周りのコードがあると回答の参考になるかもです。

[kosuke_ikeura]

ご指摘ありがとうございます。
追記致しました。

Answer 1

<%= form_with(model: @flavor, local: true) do |form| %>

で使われている local: trueは外すといいかもです。
参考：【Rails】form_with (local: true)について

Comments

[kosuke_ikeura]

外しましたが、できませんでした。。
ログを見ると、edit.js.erbは読み込まれているようです。
edit.js.erbがおかしい。。？？

[hatsu]

>現状はツボをクリックしても反応しないです。。。
edit.js.erbは読み込まれていて、アップデートボタンを押しても動かない認識ですが、あってますか？
もしあればアップデートボタンを押したときのログをみたいです。

[kosuke_ikeura]

ツボを押したら、edit.js.erbは読み込まれるが、modal-formが出てこないという感じです。
なのでアップデートボタンは出てきません。
すみません。おそらく説明不足で、2枚目の写真はデザインを考えるときに作ったphotoshopでの画像のスクリーンショットです。