添加新选项以在Rails中进行选择

时间:2019-04-08 20:16:56

标签: ruby-on-rails ajax activerecord

我目前有一家供应商,可以在其上附加任何数量的标签。但是,我也希望用户能够在表单上添加额外的标签。以前,我是使用表单中的fields_for和文本字段以及控制器中的accepts_nested_attributes来完成此操作的,但是当将具有相同名称的标签添加到两个不同的供应商时,这会导致标签重复。我知道发生这种情况是因为每个供应商只能看到其拥有的标签,因此不知道其他标签的ID。

现在,我已切换到select,其中列出了所有可能的标签,并将所有权ID列表传递给控制器​​。但是,我无法再添加新标签,因为如果没有先将新标签的ID添加到数据库中,则找不到新标签的ID。看来我无法使用fields_forselect内构建选项,因此我对如何处理此问题有些困惑。我已经研究过使用AJAX通过remote: true中的form_for选项创建标签,但是似乎不支持表单中的表单。

以下是基本的模型关系:

class Vendor < ActiveRecord::Base
  has_many :vendor_ownerships
  has_many :ownerships, through: :vendor_ownerships
end
class Ownership < ApplicationRecord
  has_many :vendor_ownerships
  has_many :vendors, through: :vendor_ownerships
end
class VendorOwnership < ApplicationRecord
  belongs_to :vendor
  belongs_to :ownership
end

这是我的部分表格(简体)。目前,它尝试使用嵌套表单,但不起作用。

= form_for @vendor do |f|
  #form_elements_div
    .form_group.element_div
      = f.label :name
      = f.text_field :name

    #ownerships.element_div
      = f.collection_select :ownership_ids, Ownership.all, :id, :name, {}, {multiple: true}

    #new_ownerships.element_div
      -# How do I add the new tag/ownership here?
      = form_for :ownership, url: ownerships_path, remote: true do |ff|
        = ff.text_field :new_ownership_field
        = ff.submit

    #submit_div.form_group
      = f.submit class: 'btn btn-success'

从理论上讲,用于添加新标签的嵌套表单将触发create模型内部的控制器动作Ownership,但是该表单的Submit按钮始终会触发外部表单的create Vendor模型。

编辑:这是我的代码当前创建的HTML正文。

<body>
  <body id='vendorsBody'>
    <div id='form_div'>
      <h2>Edit Vendor</h2>
      <form class="edit_vendor" id="edit_vendor_1" action="/vendors/1" accept-charset="UTF-8" method="post">
        <input name="utf8" type="hidden" value="&#x2713;" />
        <input type="hidden" name="_method" value="patch" />
        <input type="hidden" name="authenticity_token" value="PzG968HknJ5wCYt37g7RL8J4/00rmcnIO6T02owt5HBh9FUsXfWd00WZW1k/vM+o4RktfbKPBEcWk4BdCfYnhg==" />

        <div id='form_elements_div'>
          <div class='form_group element_div'>
            <label for="vendor_name">Name</label>
            <input type="text" value="Vendor 1" name="vendor[name]" id="vendor_name" />
          </div>

          <div class='element_div' id='ownerships'>
            <input name="vendor[ownership_ids][]" type="hidden" value="" />
              <select multiple="multiple" name="vendor[ownership_ids][]" id="vendor_ownership_ids">
                <option selected="selected" value="1">Type 1</option>
                <option selected="selected" value="2">Type 2</option>
                <option selected="selected" value="3">Type 3</option>
              </select>
          </div>

          <div class='element_div' id='new_ownerships'>
            <form action="/ownerships" accept-charset="UTF-8" data-remote="true" method="post">
              <input name="utf8" type="hidden" value="&#x2713;" />
              <input type="text" name="ownership[new_ownership_field]" id="ownership_new_ownership_field" />
              <input type="submit" name="commit" value="Save Ownership" data-disable-with="Save Ownership" />
            </form>
          </div>
          <div class='form_group' id='submit_div'>
            <input type="submit" name="commit" value="Update Vendor" class="btn btn-success" data-disable-with="Update Vendor" />
            <button class='btn btn-danger' id='cancel_button' onclick='confirmVendorCancel()' type='button'>Cancel</button>
          </div>
        </div>
      </form>
    </div>
  </body>
</body>

0 个答案:

没有答案