現在ECサイトを作成しています。
注文画面で商品のコード番号を入力すると商品の情報が表示され注文できるようにしたいです。
サンプルで作成したRailsアプリケーションではうまくいっていましたが、新しく作成して同じような動作をしたいのですのですが、javascriptでの検索がうまくいきません。
できるだけコードを変更せずにやっていきたいと思っています。
わかる方がいらっしゃればよろしくお願いします。
###エラー詳細(terminalのログ画像)
###期待する動作
- データベースにコード番号をpostして情報を取得、取得した値をフォームのテキストボックスに表示する
###問題点
- データベースにコード番号をpostして情報をテキストボックスに表示できない(モデル検索がうまくいっていないことが原因だと思います)
###実現したいこと
コード番号を入力するとそれに基づいたデータを参照して表示させたい。
###サンプルアプリケーション作成で参考にしたサイト
Railsでajaxを用いた簡単なインクリメンタルサーチを実装する
###動作環境
OS:mac
Ruby:2.3.5
Ruby on Rails: 4.2.5
##補足情報(変更点、エラー原因になりえている要素)
サンプルと新規作成したアプリケーションのおおきな違いとしては
- 商品モデルの名前を変更(ユーザーレベルごとに商品単価が違うため複数作成するため)
- サンプルの商品モデルは product、新規アプリケーションは product_rank0 となっている
- 商品モデルのカラム名が変更されている(基本的に内容は同じ)
###うまくいっていないコード(必要だと思われる内容だけ)
データベース登録内容(商品モデル、少し余分な内容も含まれています(エラー原因の可能性要素1))
schema.rb
ruby
1ActiveRecord::Schema.define(version: 20180112101528) do 2#注文明細テーブル 3 create_table "orderdetails", force: :cascade do |t| 4 t.integer "order_id", limit: 4 #注文テーブルのid 5 t.integer "code_no", limit: 4 #コード番号 6 t.string "product_name", limit: 255#商品名 7 t.integer "quantity", limit: 4 #数量 8 t.float "price", limit: 24 #価格 9 t.string "unit", limit: 255 #単位 10 t.integer "sub_total", limit: 4 #小計 11 end 12 13#注文テーブル 14 create_table "orders", force: :cascade do |t| 15 t.string "order_no", limit: 255 16 t.integer "user_id", limit: 4 17 t.datetime "created_at", null: false 18 t.datetime "updated_at", null: false 19 end 20 21#商品テーブル 22 create_table "product_rank0s", force: :cascade do |t| 23 t.string "code_no", limit: 255 #コード番号 24 t.string "product_name", limit: 255 #商品名 25 t.string "unit", limit: 255 #単位 26 t.float "s_price1", limit: 24 #販売価格 27 end
config/routes.rb
ruby
1Rails.application.routes.draw do 2 3 resources :orders do 4 collection do 5 get 'search_product' 6 end 7 end 8 9 resources :orderdetails 10 root to: 'tops#index' 11end
app/controllers/orders_controllers.rb(エラー原因の可能性要素2)
ruby
1class OrdersController < ApplicationController 2 def new 3 @order = Order.new 4 5 (1..10).each do |num| 6 @order.orderdetails.build 7 end 8 end 9. 10. 11 # jsonでデータを取得する 12 def search_product 13 14 @product = Product_rank0.where('code_no LIKE(?)', "#{params[:keyword]}") 15 render json: @product 16 #試した内容1 17 # @product = Product_rank0.find_by(code_no: "#{params[:keyword]}") 18 # render json: @product 19 end 20. 21. 22end
app/assets/javascript/orders.js(エラー原因の可能性要素3)
javascript
1$(document).on('turbolinks:load', function(){ 2 $('#order_orderdetails_attributes_0_code_no').change(function () { 3 var input = ($(this).val()); 4 $.ajax({ 5 url: '/orders/search_product', 6 type: 'GET', 7 data: ('keyword=' + input), 8 processData: false, 9 contentType: false, 10 dataType: 'json' 11 }) 12 .done(function(data){ 13 $(data).each(function(i, product){ 14 $('#order_orderdetails_attributes_0_part_number').val(product.part_number) 15$("#order_orderdetails_attributes_0_product_name").val(product.product_name) 16$("#order_orderdetails_attributes_0_unit").val(product.unit) $("#order_orderdetails_attributes_0_price").val(product.selling_price1) 17 }); 18 }); 19 }); 20// 2番目の入力項目 21. 22. 23});
app/views/orders/new.html.erb
ruby
1<%= form_for (@order), html:{id: 'form'} do |f|%> 2 3 <%= f.fields_for :orderdetails do |orderdetail, s | %> 4 <tr> 5 <td><%= orderdetail.text_field 'code_no', :size => "5"%></td> 6 <td><%= orderdetail.text_field 'product_name', disabled: 'disabled' %></td> 7 <td><%= orderdetail.text_field 'quantity', :size => "3" %>×<%= orderdetail.text_field 'unit', :size => "1", disabled: 'disabled' %></td> 8 <td><%= orderdetail.text_field 'price', :size => "7", disabled: 'disabled' %></td> 9 <td><%= orderdetail.text_field 'subtotal', :size => "7", disabled: 'disabled' %></td> 10 </tr> 11 <% end %> 12 <%= f.hidden_field :user_id, value: current_user.id %> 13</table> 14 <br /> 15 <div class="actions"> 16 <%= f.submit %> 17 </div> 18 <% end %> 19