預填充的Rails使用Ajax動作（導軌5和jQuery）

Question

我試圖建立一個發票的應用程序，每一個發票有一行發票項目（例如產品名稱，價格，數量） collection_select。

我想，當我從從下拉列表中發票項目選擇產品名稱，一個Ajax是被炒到查詢產品數據庫表與PARAMS [：PRODUCT_ID]，得到產品成本從數據庫中，因此立即填充項目成本。

即當用戶選擇產品名稱時，該產品成本即使沒有輸入也會立即顯示。

在下面的附加圖像，我的QUERY_STRING返回JSON如預期，除了我不知道如何傳遞/顯示返回數據到cost_field。

，如果我做HTML（product.cost），我得到/返回[目標，對象]在#notification和undefind成本導軌控制檯了。

我的問題是，我該如何做這樣的事情？ $（ 「＃通知」）HTML（product.cost）

模型：

class Invoice < ApplicationRecord 
     has_many :items, dependent: :destroy 
     accepts_nested_attributes_for :items, allow_destroy: true, reject_if: proc {|a| a[:product_id].blank?} 
     has_many :products, through: :item 
    end 

    class Item < ApplicationRecord 
     belongs_to :invoice, optional: true 
     belongs_to :item, optional: true 
    end 

    class Product < ApplicationRecord 
     has_many :items 
    end 

控制器

class InvoicesController < ApplicationController 
     before_action :set_invoice, only: [:show, :edit, :update, :destroy] 


    def index 
    @invoices = Invoice.all 
    end 

    def new 
    @invoice = Invoice.new 
    2.times { @invoice.items.build } 
    end 

    def pricedata 
    @product = Product.select(:id, :cost, :productname).where('products.id = ?', params[:product_id]) 

    respond_to do |format| 
    format.html { render html: @product.id } 
    format.js #{ render js: @product} 
    format.json { render json: @product } 
    end 

    private 
    def invoice_params 
     params.require(:invoice).permit(:name, :amount, items_attributes: [:qty, :price, :id, :product_id, :_destroy]) 
    end 

FORM

 <p id="notification"></p> # notice to keep my eyes on return obj 

    ... 

    <%= f.fields_for :items do |item| %> 

    <span><%= item.label :product_id %>  </span> 


    <span>  // # collection begins here 
     <%= item.collection_select(:product_id, Product.all, :id, :productname, 
      {prompt: "Select a product"}, 
      {class: 'selectors' multiple: true }) 
     %> 
     </span>  // # collection ends here 


    <span><%= item.label :qty %> </span> 
    <span><%= item.number_field :qty %> </span> 
    <span><%= item.label :price, class: "p_price" %> </span> 
    <span><%= item.number_field :price %> </span> 
    <span><%= item.check_box :_destroy %> Remove item</span> 

    ... 

JAVASCRIPT /咖啡

$(document).ready -> 
    $('.selectors').on "change", -> 
    selectOptions= $('.selectors option:selected') 
    product_id = $(this).val() 

    if selectOptions.length > 0 
     selectOptions.each -> 
      $.ajax({ 
       url: '/invoices/:id/pricedata?product_id=' + product_id, 
       type: 'GET', 
       dataType: 'html', 
       contentType: 'application/html' 
       success: (product)-> 
         $("#noticification").html(product) 
         console.log(product) 
        }) 

Answer 1

你真的過於複雜了。要獲得產品的詳細信息，您只需發送一個ajax請求到ProductsController上的簡單顯示操作即可。

class ProductsController < ApplicationController 
    # GET /products/:id 
    def show 
    @product = Product.find(params[:id]) 
    respond_to do |format| 
    format.html 
    format.json { render json: @product } 
    end 
    end 
end 

而且你不應該使用多選擇在這種情況下，它將使數量和價格曖昧。而是爲每個項目行創建一個字段集或div。 的fields_for助手可以用來給每個項目的具體範圍：

<%= form_for(@invoice) do %> 
    # ... 
    <%= fields_for(:items) do |item| %> 
    <!-- group each item in an element so you can find the associated inputs --> 
    <div class="item"> 
    <!-- use a div to group inputs ands labels instead! --> 
    <span><%= item.label :product_id %>  </span> 
    <span><%= item.collection_select(:product_id, Product.all, :id, :productname, 
      {prompt: "Select a product"}, 
      {class: 'selectors' multiple: true }) %> 
    </span>  // # collection ends here 
    <span><%= item.label :qty %> </span> 
    <span><%= item.number_field :qty %> </span> 
    <span><%= item.label :price, class: "p_price" %> </span> 
    <span><%= item.number_field :price %> </span> 
    <span><%= item.check_box :_destroy %> Remove item</span> 
    </div> 
    <% end %> 
    # ... 
<% end %>