引導模式嵌套模式表單視圖搞砸

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 

周圍代碼運動，因爲早上的輔助功能，仍然無法弄清楚如何通過添加對齊邊來修復這些按鈕，添加更多將會是a也是藍色的按鈕，我只是在玩耍，並將其轉換爲鏈接。我使用簡單形式

Answer 1

如果你想與它們對應的燃料類型和價格領域對準你的「刪除」按鈕，那麼你需要把他們都在一個單一的自舉行，像這樣：

<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>