Cocoon Item 字段未将值发布到数据库

Posted 2023-05-09

【中文标题】Cocoon Item 字段未将值发布到数据库

【英文标题】：Cocoon Item field not posting values to database

【发布时间】：2020-04-22 17:52:27

【问题描述】：

我有一个使用 Cocoon gem 生成的 lineItem 字段，在尝试保存 line items 字段值时遇到问题，当我检查元素时，add_item 按钮没有为每个生成的新字段触发唯一 ID。

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


def index
  @invoices = Invoice.all
end


def show

end

def new
   @invoice = Invoice.new
   @invoice.line_items.build
end


def edit

end


 def create
 @invoice = Invoice.new(invoice_params)

  respond_to do |format|
   if @invoice.save
    format.html  redirect_to @invoice, notice: 'Invoice was successfully created.' 
    format.json  render :show, status: :created, location: @invoice 
   else
    format.html  render :new 
    format.json  render json: @invoice.errors, status: :unprocessable_entity 
   end
  end
 end


 def update
  respond_to do |format|
  if @invoice.update(invoice_params)
    format.html  redirect_to @invoice, notice: 'Invoice was 
    successfully updated.' 
    format.json  render :show, status: :ok, location: @invoice 
  else
    format.html  render :edit 
    format.json  render json: @invoice.errors, status: :unprocessable_entity 
   end
 end
end

 def destroy
  @invoice.destroy
  respond_to do |format|
  format.html  redirect_to invoices_url, notice: 'Invoice was successfully destroyed.' 
  format.json  head :no_content 
  end
 end

private
# Use callbacks to share common setup or constraints between actions.
 def set_invoice
  @invoice = Invoice.find(params[:id])
 end

 def set_line_item
  @line_item = LineItem.find(params[:id])
 end

# Never trust parameters from the scary internet, only allow the white list through.
#def invoice_params
  #params.require(:invoice).permit(:total_amount,  :issue_date, :currency, :description)
#end

def invoice_params
  params.require(:invoice).permit(:amount, :date, :currency, line_items_attributes: [:id,:quantity,:net_amount, :description, :unit_cost])
  end
 end

这是我的表单部分视图 enter image description here

<div class="container">
    <div class="row">
            <div class="col">
              <%= f.label :date %>
               <%= f.input_field :date , class: "form-control datepicker", as: :string, id: "invoice_date" %>
             </div>
            <div class="col">
                <%= f.label :currency %>
                 <%= f.input_field :currency , class: "form-control" , id: "invoice_currency" %>
            </div>

            <div class="col">
                <h5>Amount Due : <span class="bal" id="invoice_total">679.00</span><span class="subtotal_currency">
                </span></h5>
            </div>
       </div>
     </div>
 </div>

    <table class="table">
          <thead>
              <tr>
                <th class="description">Description</th>
                <th class="quantity">Quantity</th>
                <th class="cost">Unit Cost</th>
                <th class="price">Total Amount</th>
                <th class="action">Action</th>
              </tr>
           </thead>
            <tbody class='line_items'>
              <div id="task">
                  <%= f.simple_fields_for :line_items do |items| %>
                  <%= render 'line_item_fields', f: items %>
                <% end %>   
           </tbody>
    </table>
                  <div class='links'>
                    <%= link_to_add_association 'add item', f, :line_items, class: "btn btn-primary",data: "association-insertion-node" => "tbody.line_items", "association-insertion-method" => "append" %>
                    <%= f.submit  class:"btn btn-primary" %>
                  </div>
              </div>
              <br>

这是我的嵌套表单视图

<tr class="nested-fields">
  <div class="container">
  <div class="row row-cols-5">
    <div class="col"> <td><%= f.text_field :description, class: "form-control item_desc" %></td></div><br/>
    <div class="col"> <td><%= f.text_field :quantity,  class: "form-control quantity" %></td></div><br/>
    <div class="col"> <td><%= f.text_field :unit_cost, class: "form-control unit_cost"%></td></div><br/>
    <div class="col"> <td class="price_td"><%= f.text_field  :net_amount, class: "form-control price", :readonly => true %></span> <span class= "subtotal_currency"></span></td></div><br/>
    <div class="col"> <td><%= link_to_remove_association 'Delete', f, class: 'remove_record btn btn-danger' %></td></div>
  </div>
</div>
</tr>

这是我的 javascript 文件

function update_price() 
    var row = $(this).parents('.nested-fields');
    var price = row.find('.unit_cost').val() * row.find('.quantity').val();
    price = price.toFixed(2);
    isNaN(price) ? row.find('.price').val('is not a number') : 
    row.find('.price').val(price);
    update_subtotal();    


$(document).on('cocoon:after-insert', '#task', function(added_task)
   // $('.links')
      //('cocoon:after-insert', function(e, added_task) 
       // console.log(added_task);
     // )
      $("#task").on('click', function()
     console.log('looks like clicking works...'); //this works fine
   );

);

$(document).on('blur', '.unit_cost, .quantity', update_price)

这些是发布到控制器的值

"authenticity_token"=>"qMr1sDqfOVTdjVvXzC3Hvejh3KXnoyburvHXwu7L6Qg1mSDqnagLo0gSXrUcpJumMeb1u9pPLz9OyaYndbeqBA==", "invoice"=>"date"=>"2019/12/06","currency"=>"Naira", "line_items_attribute" "=>"description"=>"rice", "quantity"=>"2", "unit_cost"=>"56", "net_amount"=>"112.00", "_destroy"=>"false" , "commit"=>"创建发票" 不允许的参数：:_destroy

【问题讨论】：

你能告诉我们发布到控制器的内容吗？检查日志文件以获取已发布的参数。请正确格式化您的代码（修复缩进）。

发票创建 INSERT INTO "invoices" ("created_at", "updated_at", "currency") VALUES (?, ?, ?) [["created_at", "2020-01-04 13: 08:45.182484"], ["updated_at", "2020-01-04 13:08:45.182484"], ["currency", ""]] LineItem Create (1.2ms) INSERT INTO "line_items" ("net_amount", “描述”、“数量”、“created_at”、“updated_at”、“unit_cost”、“invoice_id”）值（？，？，？，？，？，？，？）[[“net_amount”，18.0]，[ "描述", "大米"], ["数量", 3.0], ["created_at", "2020-01-04 13:08:45.184837"], ["updated_at", "2020-01-04 13:08 :45.184837"], ["unit_cost", 6.0], ["invoice_id", 48]]

请显示发布到控制器的参数？在开始处理请求的那一行，它还应该显示所有参数（即表单的内容）。这将解释您的 html 格式是否正确。还请显示完整的表单视图代码？您能否在 html 中验证（在浏览器中检查）使用 link_to_add_association 按钮插入的项目是否包含在表单中？ （在<form></form> 标签之间？）

我已经更新了之前提供的信息，以便您更好地理解我的问题，我还添加了在 add_item 按钮上执行的页面检查的屏幕截图。感谢您的宝贵时间

非常感谢您迄今为止的支持。您对不在表格中的插入项目是正确的，这就是问题所在。它现在修复了，一切都很好。

【参考方案1】：

从发布到控制器的参数中，我们可以看到它只有 1 个line_item，并且没有动态添加的。

这有几个可能的原因：

使用 html-ids 重复元素。例如，嵌套项位于具有固定 html-id 的封装元素内：由于 html 中不允许重复 id，但可以正确呈现，因此在收集表单数据时会忽略它们。只会保存第一个元素。 另一个常见原因是链接到添加关联在页面上插入了嵌套元素，并且一切“看起来都不错”，但嵌套项在表单外部，因此在发布时从未收集过表格。在这种情况下，永远不会保存新添加的项目。