ruby on rails - coccoon: change where added form field is rendered -
i have form uses coccoon dynamically add form fields. problem styling. form fields being added in wrong spot. here code:
<div class="col-md-5> <!--content here !--> </div> <div class="col-md-2"> <!-- more content here !--> </div> <%= form_for @owner |f| %> <div class="col-md-4"> <%= f.fields_for :cars |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' %> <i class="md md-add"></i> <% end %> </div> <% end %>
here code of partial car_fields:
<div class="form-group" style="padding: 10px 40px;" > <%= f.text_field :make, class: 'form-control input-sm', placeholder: "car make"%> </div>
i want link_to_add_association
button to right of form. when pressed, want new form field appear inside col-md-4
. instead, appearing below of content on page. how make new form field appear inside col-md-4
? think has data-association-insertion-node
or data-association-insertion-method
documentation has been difficult.
from documentation https://github.com/nathanvda/cocoon
data-association-insertion-node
: jquery selector of node. default: parent node
data-association-insertion-method
: jquery method inserts new data. before, after, append, prepend, etc. default: before
data-association-insertion-traversal
: jquery traversal method allow node selection relative link. closest, next, children, etc. default: absolute selection
so using default traversal method absolute
, can go this
<%= form_for @owner |f| %> <div id="place-to-insert" class="col-md-4"> <%= f.fields_for :cars |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"} %> <i class="md md-add"></i> <% end %> </div>
Comments
Post a Comment