###実現したいこと
現在 ruby、Ruby on Rails で ECサイトを作成しています。
注文画面から 商品コード と 数量 を必要な分だけ入力すれば注文できるシステムを作成したいです。
具体的には注文フォームで商品コードテキストフィールドのフォーカスが外れると商品モデルから該当する商品コードのデータの内容を表示させたいです。
###問題点
0. 商品コードを入力してフォーカスがはずれても各項目にデータが表示されない
ご助力いただきますようお願いいたします。
###補足
下記サイトを参考にソースを作成しました。
http://ruby.studio-kingdom.com/rails/guides/form_helpers#building_complex_forms
https://doruby.jp/users/maya/entries/_Rails_Rails_Ajax_Ajax_
###開発環境
OS:mac
Ruby:2.3.5
Rails:4.2.5
###ソースコード
model
ruby
1#app/models/orderdetail.rb 2class Orderdetail < ActiveRecord::Base 3 belongs_to :order 4 belongs_to :product 5end 6 7#app/models/order.rb 8class Order < ActiveRecord::Base 9 has_many :orderdetails 10 accepts_nested_attributes_for :orderdetails 11end 12 13#app/models/product.rb 14class Product < ActiveRecord::Base 15 has_many :orderdetail 16end
app/config/routes.rb
ruby
1 resources :orders 2 resources :orderdetails do 3 post 'search_product', on: :collection 4 end 5 end 6 resources :products
schema.rb
ruby
1#注文テーブル 2 create_table "orders", force: :cascade do |t| 3 t.integer "user_id", limit: 4 4 t.integer "orderdetail_id", limit: 4 5 end 6 7#注文明細テーブル 8 create_table "orderdetails", force: :cascade do |t| 9 t.integer "code_no", limit: 4 10 t.integer "order_id", limit: 4 # 11 #数量(セット数) 12 t.integer "quantity", limit: 4 13 #出荷単位 14 t.integer "shipping_unit", limit: 4 15 t.float "price", limit: 24 16 17#商品テーブル 18 create_table "Products", force: :cascade do |t| 19 #商品コード 20 t.integer "code_no", limit: 4, null: false 21 #品番 22 t.string "part_number", limit: 255, null: false 23 #品名 24 t.string "product_name", limit: 255, null: false 25 #販売価格 26 t.integer "selling_price1", limit: 4, null: false 27 #出荷単位 28 t.integer "shipping_unit", limit: 4, null: false 29 end
View(app/views/orders/new.html.erb)
ruby
1注文内容 2<table border="1"> 3 <thead> 4 <tr> 5 <th>コード</th> 6 <th>品番</th> 7 <th>品名</th> 8 <th>セット数</th> 9 <th>出荷単位</th> 10 <th>販売価格</th> 11 <th>金額</th> 12 </tr> 13 </thead> 14 15 <tbody> 16 <%= form_for @order do |f|%> 17 <%= f.fields_for :orderdetails do |orderdetail| %> 18 <tr> 19 <td><%= orderdetail.text_field 'code_no' %></td> 20 <td><div id="part_number"></div></td><!--品番を表示したい--> 21 <td><div id="product_name"></div></td><!--品名を表示したい--> 22 <td><%= orderdetail.text_field 'quantity' %></td> 23 <td><div id="shipping_unit"></div></td><!--出荷単位を表示したい--> 24 <td><div id="price"></div></td><!--販売価格を表示したい--> 25 <td><div id="total_price"></div></td><!--金額を表示したい--> 26 </tr> 27 <% end %> 28 <% end %> 29 </tbody> 30</table>
controller
ruby
1#app/controllers/orders_controller.rb 2 def new 3 @order = Order.new 4 5 #カートの入力欄表示初期値 6 @count = 2 7 8 #入力欄の表示 9 @count.times { @order.orderdetails.build } 10 end 11 12 13#app/controllers/orderdetails_controller.rb 14 def new 15 @orderdetail = Orderdetail.new 16 end 17 18 def search_product 19 @product = Product.find_by(code_no: params[:code_no]) 20 21 render layout: false 22 end 23
app/views/orderdetails/search_product.coffee
ruby
1$('#part_number’).text(‘<%= @product.part_number %>') #品番 2$('#product_name’).text(‘<%= @product.product_name %>') #品名 3$('#shipping_unit’).text(‘<%= @product.shipping_unit %>') #出荷単位 4$('#price_1’).text(‘<%= @product.selling_price1 %>') #販売価格
app/assets/javascripts/orderdetails.coffee
ruby
1$ -> 2# テキストボックスからフォーカスが外れたらフォームをsubmit 3 $('#code_no').change( -> 4 $product_id.val($(this).val()) # 選択された商品のIDをパラメータとして渡す 5 $product_id.closest('form').submit() 6 )
あなたの回答
tips
プレビュー