表单生成后的cocoon构建资源

时间:2017-12-21 04:02:17

标签: ruby-on-rails cocoon-gem

我有一张账单表格。打开后,我选择供应商来显示供应商的未结采购订单清单。选择采购订单应采用采购订单中订购的所有项目,并将其显示为帐单中的行项目。

如果表单已经呈现并且我已经看到嵌套属性以及在表单上添加更多或删除等的链接,该如何实现?

我当前的实现是使用cocoon的简单嵌套资源。

<%= simple_form_for(@bill) do |f| %>
  <%= f.error_notification %>
  <div class="form-inputs">
    <%= f.input :vendor_id, as: :select do %>
      <%= f.grouped_collection_select :vendor_id, Warehouse.ordered, :vendors, :name, :id, :name, include_blank: true %>
    <% end %>
  </div>
  <div id="items">
    <div id="ingredient_purchase" class="row">
      <div class="row">
        <%= f.simple_fields_for :warehouse_ingredient_purchase_logs do |warehouse_ingredient_purchase_log| %>
        <%= render 'warehouse_ingredient_purchase_log_fields', :f => warehouse_ingredient_purchase_log %>
        <% end #f.simple_fields_for %>
        <div class="links">
          <%= link_to_add_association 'Add More', f, :warehouse_ingredient_purchase_logs %>
        </div>
      </div>
    </div>
  </div>
  <div class="form-actions">
    <%= f.button :submit %>
  </div>
<% end #simple_form_for(@bill) do |f| %>
<!-- Modal Structure -->
<div id="modal1" class="modal bottom-sheet">
  <div class="modal-content">
    <h4>Purchase Orders</h4>
    <div class="purchase_orders_data"></div>
  </div>
</div>

2 个答案:

答案 0 :(得分:2)

您可以使用ajax

完成此操作

当您选择其中一个项目时,您需要对后端服务器执行异步调用。该页面不会通过异步调用刷新。

您可以使用button_tolink_to帮助程序触发此操作,然后配置路由以触发您的操作(或仅使用模型对象自动生成路由),并在您的操作中获取这些供应商账单:

setupController

在您的js文件def action @vendor = Vendor.find(params[:id]) @bills = @vendor.bills respond_to do |format| format.js end end 中,您可以编写js逻辑来修改表单

供应商帐单也可以包含在部分action.js.erb中,_object.html.erb可以将该部分附加到页面

action.js.erb

答案 1 :(得分:2)

所以,不是首先渲染表单然后尝试使用javascript修改它, 我首先收集参数:供应商和一个或多个采购订单,并使用该数据来构建帐单然后显示它。

如何实际执行此操作(使用html或ajax / xhr)取决于您,但在您知道应如何构建帐单时,请有效地等待构建帐单表单。

可能的方法:

  • 打开帐单创建屏幕,显示供应商列表,显示模式,然后发布并创建帐单,然后重定向到编辑(简单但帐单已经创建,可能你不想要),
  • 打开帐单创建屏幕,控制器没有参数如此:显示供应商列表,显示模态,然后再次获取帐单创建屏幕但使用给定参数(供应商+帐单)并显示创建新帐单的正确表单;
  • 打开账单创建,显示供应商列表,打开模态,选中时执行ajax / xhr调用构建表单,然后再渲染并继续。

这非常通用,但可能有助于解决问题。