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>

Bootstrap模态嵌套模型表单视图搞砸了

1 个答案: