Question

我有一个使用cocoon动态添加表单字段的表单。问题在于造型。表单字段正在错误的位置添加。这是我的代码：

<div class="col-md-5>
    <!--content here !-->
</div>
<div class="col-md-2">
    <!-- more content here !-->
</div>
<%= form_for @owner do |f| %>
    <div class="col-md-4">
        <%= f.fields_for :cars do |car| %>
            <%= render 'cars_fields', :f => car %>
        <% end %>

        <div class="row text-center center-block">
            <%= f.submit "send", class: 'btn btn-default' %>
        </div>  
    </div>
    <div class="col-md-1">
        <%= link_to_add_association f, :cars, class: 'btn bgm-cyan btn-float waves-effect' do %>
            <i class="md md-add"></i>
        <% end %>
    </div>
<% end %>

以下是部分car_fields的代码：

<div class="form-group" style="padding: 10px 40px;" >
    <%= f.text_field :make, class: 'form-control input-sm', placeholder: "Car Make"%>
</div>

我希望link_to_add_association按钮位于表单的右侧。按下时，我希望新表单字段显示在col-md-4内。相反，它出现在页面上的所有内容下方。如何使新表单字段显示在col-md-4中？我认为这与data-association-insertion-node或data-association-insertion-method有关，但文档很难。

Answer 1

来自文档https://github.com/nathanvda/cocoon

data-association-insertion-node：节点的jquery选择器。默认值：父节点

data-association-insertion-method：插入新数据的jquery方法。之前，之后，追加，前置等。默认：之前

data-association-insertion-traversal：jquery遍历方法，允许相对于链接进行节点选择。最近的，下一个，孩子等。默认：绝对选择

因此，通过使用absolute的默认遍历方法，你可以选择这样的东西

<%= form_for @owner do |f| %>
<div id="place-to-insert" class="col-md-4">
    <%= f.fields_for :cars do |car| %>
        <%= render 'cars_fields', :f => car %>
    <% end %>

    <div class="row text-center center-block">
        <%= f.submit "send", class: 'btn btn-default' %>
    </div>  
</div>
<div class="col-md-1">
    <%= link_to_add_association f, :cars, class: 'btn bgm-cyan btn-float waves-effect0', data: {association_insertion_method: "append", association_insertion_node: "#place-to-insert"} do %>
        <i class="md md-add"></i>
    <% end %>
</div>

cocoon：更改添加的表单字段的位置

1 个答案: