引导模式嵌套模型表单视图搞砸了

Question

这就是发生的事情

这是我的观点代码

表格

<%= simple_form_for([:supplier, @fuel_price],remote: true, :html => {:class => 'form-vertical' }) do |f| %>
<%= f.simple_fields_for :fuel_products do |fuel_products_form| %>
<div class="field">
    <%= render partial: 'fuel_products_fields', locals: {f: fuel_products_form} %>
</div>
<% end %>
<%= link_to_add_fields "Add more", f, :fuel_products %>
<div class="modal-footer">
    <%= f.button :submit, "Update", class: "btn btn-success"%>
</div>

<%end%>

燃料产品领域部分

<div class="col-md-6">
    <%= f.input :fuel, label: "Fuel Type", :collection => fuel_types, class: "form-control select",:selected => "87 RFG" %>
</div>
<div class="col-md-3">
    <%= f.input :price, class: "form-control", placeholder: "$1.25" %>
</div>
<%= f.hidden_field :_destroy %>
<ul class="list-unstyled">
    <li><%= link_to '#', class: "btn btn-danger btn-xs remove_fields" do %>
        Remove&nbsp;&nbsp;&nbsp;
        <%end%></li>
</ul>

Javascript 代码

ready = ->
  $('#FuelmodelBody').on 'click', '.remove_fields', (event) ->
    $(this).prev('input[type=hidden]').val('1')
    $(this).closest('.field').hide()
    event.preventDefault()

  $('#FuelmodelBody').on 'click', '.add_fields', (event) ->
    console.log('It is really happening ....')
    time = new Date().getTime()
    regexp = new RegExp($(this).data('id'), 'g')
    $(this).before($(this).data('fields').replace(regexp, time))
    event.preventDefault()

$(document).ready(ready)
$(document).on('page:load', ready)

查看模态代码

  <div class="modal inmodal" id="newFuelPrice" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content animated bounceInRight">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                        <span aria-hidden="true">&times;</span>
                        <span class="sr-only">Close</span>
                    </button>
                    <i class="fa fa-usd modal-icon" style="color:#1ab394"></i>
                    <h4 class="modal-title">Add New Fuel Price</h4>
                    <span class="font-bold">Your contacts will get text message of your latest price</span>
                </br>
                <span class="font-bold">As (your fuel price + the formula).</span>
            </div>
            <div class="modal-body" id="FuelmodelBody">
                <!-- form -->

            </div>
        </div>
    </div>
</div>

我还有一个 link_to_add_fields 的辅助函数

def link_to_add_fields(name, f, association)
        # creates a new instance of the 'has_many' object
        new_object = f.object.send(association).klass.new
        # new_object = f.object.association.klass.new
        #    f.object.association.klass # => Document
        # new_object = f.object.documents.build Document(user_id: f.object.id)

        # gets the object id
        id = new_object.object_id

        # creates a new form for the association
        fields = f.fields_for(association, new_object, child_index: id) do |builder|
            render(association.to_s + '_fields', f: builder)
        end
        link_to(name, '#', class: 'add_fields', data: { id: id, fields: fields.delete("\n") })
    end

从早上开始移动代码，仍然无法弄清楚如何通过对齐添加来修复这些按钮，添加更多也将是蓝色按钮，我只是在玩耍并将其转换为链接。我正在使用简单的表单

Answer 1

如果您想将“移除”按钮与其对应的燃料类型和价格字段对齐，则需要将它们全部放在一个 Bootstrap 行中，如下所示：

<div class="row">
  <div class="col-md-6">
    <%= f.input :fuel, label: "Fuel Type", :collection => fuel_types, class: "form-control select",:selected => "87 RFG" %>
  </div>
  <div class="col-md-3">
    <%= f.input :price, class: "form-control", placeholder: "$1.25" %>
  </div>
  <div class="col-md-3">
    <%= f.hidden_field :_destroy %>
    <ul class="list-unstyled">
      <li><%= link_to '#', class: "btn btn-danger btn-xs remove_fields" do %>
            Remove&nbsp;&nbsp;&nbsp;
        <%end%></li>
    </ul>
  </div>  
</div>

另外，您可能不需要那个额外的ul 标签。它没有任何额外的含义，因为你只有一个按钮。这不是一个列表。

<div class="row">
  <div class="col-md-6">
    <%= f.input :fuel, label: "Fuel Type", :collection => fuel_types, class: "form-control select",:selected => "87 RFG" %>
  </div>
  <div class="col-md-3">
    <%= f.input :price, class: "form-control", placeholder: "$1.25" %>
  </div>
  <div class="col-md-3">
    <%= f.hidden_field :_destroy %>
    <%= link_to 'Remove', '#', class: "btn btn-danger btn-xs remove_fields" %>
  </div>
</div>