投稿2021/11/25 02:38
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
別途作業中でいささ見づらいところもあるかと存じますが、
お力添えいただければ幸甚です。
また、不足した情報等あればご指摘ください。
あなたの回答
tips
プレビュー
Q&A
