enumの非同期通信がしたい

実現したいこと

railsで簡単なECサイトを作る練習をしており、注文ステータスの非同期通信を実装しようとしたところHLML通信のままになってしまっているのを解消したいです

##前提
Javasqriptが問題なくインストール、実装されていることは以下の記述と動作で確認済みです。

ruby
1
2admin/orders/show.html
3　　　　　
4>>>>>略
5  <h1>Ajax#index</h1>
6<p id="hoge">赤色になるよ</p>
7
8</div>
9
10<script>
11  $("#hoge").css("color","red")
12</script>
13
14>>>>>略

しかしながら、こちらに<script>を記載しても発火いたしませんでした。

ruby
1orders/update.js
2$("#order_status_<%= @order.id %>").html("<%= j(render partial: 'admin/orders/order_status', locals: {order: @order}) %>");
3
4  $("#hoge").css("color","red")

##関連のありそうなソースコード

_orders/show.html

Ruby
1<div class="container-fluid mx-5">
2    <div class="mx-9 mt-5"><h3>注文履歴詳細</h3></div>
3
4    <table class="table table-borderless">
5      <tbody>
6       <tr>
7         <th>購入者</th>
8          <td><%= link_to admin_customer_path(@order.customer) do %><!--要確認-->
9            <%= @order.customer.last_name %> <%= @order.customer.first_name %>
10            <% end %>
11          </td>
12       </tr>
13
14       <tr>
15         <th>注文日</th>
16          <td><%= l @order.created_at, format: :short %></td>
17       </tr>
18
19       <tr>
20         <th>配送先</th>
21          <td>
22            <%= @order.shipping_postal_code %>
23            <%= @order.delivery_address %>
24            <%= @order.receiver_name %>
25          </td>
26       </tr>
27
28       <tr>
29         <th>支払い方法</th>
30          <td><%= @order.payment_method %></td>
31       </tr>
32
33       <tr>
34         <th>注文ステータス</th>
35          <td id="order_status_<%= @order.id %>">
36           <%= render partial: 'admin/orders/order_status', locals: { order: @order} %>
37          </td>
38          <%#= form_with model: [:admin, @order], method: :patch, local: true do |f| %>
39          <%#= f.select :order_status, Order.order_statuses.keys.map {|k| [I18n.t("enums.order.order_status.#{k}"), k]} %>
40          <%#= f.submit "更新" %>
41          <%# end %>
42       </tr>
43      </tbody>
44    </table>
45
46
47  <div class="row align-items-end">
48   <div class="col-md-7">
49      <table class="table table-borderless">
50      <thead class="table-head" style="background-color:#FFE4E1;">
51       <tr>
52         <th scope="col">商品名</th>
53         <th scope="col">単価（税込）</th>
54         <th scope="col">数量</th>
55         <th scope="col">小計</th>
56         <th scope="col">製作ステータス</th>
57       </tr>
58      </thead>
59      <tbody>
60        <% @order_items.each do |order_item| %>
61        <tr>
62          <td><%= order_item.item.item_name %></td>
63          <td><%= order_item.tax_price %></td>
64          <td><%= order_item.number_of_piaces %></td>
65          <td><%= (order_item.tax_price.to_i * order_item.number_of_piaces.to_i).to_s(:delimited) %></td>
66          <td>
67            <%= form_with model: order_item, url: admin_order_order_item_path(@order,order_item), method: :patch, local: true do |f| %>
68            <%= f.select :production_status, OrderItem.production_statuses.keys.map {|k| [I18n.t("enums.order_item.production_status.#{k}"), k]} %>
69            <%= f.submit "更新" %>
70            <% end %>
71          </td>
72         </tr>
73        <% end %>
74      </tbody>
75    </table>
76  </div>
77
78  <th></th>
79
80   <div class="col-md-4">
81    <table class="table table-borderless">
82    <tbody>
83      <tr>
84        <th>商品合計</th><td><%= (@order.total_price.to_i - @order.shipping_fee.to_i).to_s(:delimited) %>円</td>
85      </tr>
86
87      <tr>
88        <th>送料</th><td><%= @order.shipping_fee.to_s(:delimited) %>円</td>
89      </tr>
90
91      <tr>
92        <th>請求金額合計</th><td><%= (@order.total_price.to_i).to_s(:delimited) %>円</td>
93      </tr>
94     </tbody>
95    </table>
96   </div>
97  </div>
98</div>
99

orders/_order_status.html

ruby
1
2<%= form_with model: [:admin, order], method: :patch, remote: true do |f| %>
3<%= f.select :order_status, Order.order_statuses.keys.map {|k| [I18n.t("enums.order.order_status.#{k}"), k]} %>
4<%= f.submit "更新" %>
5<% end %>
6

orders/update.js

ruby
1$("#order_status_<%= @order.id %>").html("<%= j(render partial: 'admin/orders/order_status', locals: {order: @order}) %>");

orders_controller

ruby
1class Admin::OrdersController < ApplicationController
2before_action :authenticate_admin!
3
4  def index
5   @count = Order.where(created_at: Time.zone.now.beginning_of_day..Time.zone.now.end_of_day).count
6   @orders = Order.all.page(params[:page]).per(10)
7
8  case params[:order]
9  when 'today' then
10      @orders = Order.page(params[:page]).where(created_at: Time.zone.now.beginning_of_day..Time.zone.now.end_of_day).per(10) #ここまでできてる
11  when 'customer' then
12      customer_id = Rails.application.routes.recognize_path(request.referer)[:id]
13      @customer = Customer.find(customer_id)
14      @orders = @customer.orders.page(params[:page]).per(10)
15  end
16  end
17
18  def show
19    @order = Order.find(params[:id])
20    @order_items = @order.order_items.all
21  end
22
23
24  def update
25 @order = Order.find(params[:id])
26      order_items = @order.order_items
27
28    if @order.update(order_params)
29       if @order.order_status =="入金確認"    #1
30          order.order_item.update_all(status: "製作待ち")#1)
31          redirect_to request.referer, notice:"製作ステータスを更新しました"
32      elsif @order.order_status == "製作中"#2
33            ordered.order_item.update_all(status: "製作中")#2)
34            redirect_to request.referer, notice:"製作ステータスを更新しました"
35      else
36            redirect_to request.referer, alert: "ステータスを更新できませんでした"
37      end
38     end
39   end
40　　　　　　＃エラーが出ないようにひとまずredirect_toを指定し、HTML通信のまま行っています
41
42  private
43	def order_params
44		params.require(:order).permit(:order_status)
45	end
46
47end
48

_routes.rb

ruby
1Rails.application.routes.draw do
2
3  #管理者
4  devise_for :admin, skip: [:registrations, :passwords] ,controllers: {
5  sessions: 'admin/sessions',
6  }
7
8  namespace :admin do
9   get 'admin/new', to: 'admin/sessions#new'
10
11>>略
12
13  #orders
14  resources :orders, only:[:index, :show, :update] do
15     #oder_items
16     resources :order_items, only:[:index, :update]
17  end
18
19>>略
20

そもそもenumで非同期通信するには下記のURLに記載されているような方法しかないのでしょうか？
https://pikawaka.com/rails/enum

別途作業中でいささ見づらいところもあるかと存じますが、
お力添えいただければ幸甚です。
また、不足した情報等あればご指摘ください。

MasaSakano

2021/11/26 16:20

情報が大いに不足しています。一般論として、JavaScriptを任意のファイルに書いても、それがRailsから読まれて実行されるわけではありません。だから、お使いのERBファイルにて該当JavaScriptを読み込むようにどう指定しているか、そしてRailsのJavaScript関係のAsset設定がどうなっているか、の情報は必須です。たとえば、Rails本家の https://guides.rubyonrails.org/working_with_javascript_in_rails.html がマニュアルのスタート地点です。また、enumは、DBの値をRails側でどう解釈するかという話だけなので、非同期通信とは本質的に無関係です––質問の時には両者を切り分けた状態で、問題になっている点を提示しないと、本質が不明瞭になります。