CODEWITHSUNDEEP
javascriptruby-on-railsrubyaccepts-nested-attributes
frankyorg
frankyorg

Reputation: 63

Rails + Javascript: Create one parent model and multiple child model in same time

I have a parent model (paper) and a nested child model (tape) and want to create multiple child with a parent in same time without using any gems. The input fields of tape should be dynamically added through clicking “+”.

If I write “3.times { @paper.tapes.build }” in controller, I can create 1 paper and 3 tapes in same time. But if how many times the input field should be added is depend on the user (if user click "+" 10 times, 1 parent model and 10 child model should be saved in one time), how should I modify the code?

Here is my codes. Paper Model

has_many :tapes
accepts_nested_attributes_for :tapes, allow_destroy: true

Tape Model

belongs_to :paper, optional: true

Controller

def new
    @paper = Paper.new
    3.times { @paper.tapes.build }
end

def create
  @paper = Paper.new(paper_params)
  @paper.user_id = current_user.id
  if @paper.save
    redirect_to action_list_paper_path(@paper.id)
  else
    render 'new'
  end
end

Viewer

<%= nested_form_for(@paper) do |f| %>
 <div class="container">
<%= stylesheet_link_tag 'papers', media: 'all', 'data-turbolinks-track': 'reload' %>
  <div class= "paper_form">
    <div class="col-md-6">
      <%= f.label(:content, "Name") %>
      <%= f.text_area :content %>
    </div>
   </div>
 </div>

 <div class="tape_form">
   <%= f.fields_for :tapes do |tape| %>
    <div id="input_pluralBox">
      <div id="input_plural">
        <div class="col-md-4">
         <%= tape.label :label %>
         <%= tape.text_field :label %>
        </div>
      </div>
      <input type="button" value="＋" class="add pluralBtn">
      <input type="button" value="－" class="del pluralBtn">
    </div>
  </div>
 <% end %>
 </div>
</div>
<% end %>

Javascript (The input column “label” will be added with "+" through javascript).

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).on("click", ".add", function() {
    $(this).parent().clone(true).insertAfter($(this).parent());
});
$(document).on("click", ".del", function() {
    var target = $(this).parent();
    if (target.parent().children().length > 1) {
        target.remove();
    }
});
</script>

Upvotes: 0

Views: 232

Answers (1)

3DPrintScanner
3DPrintScanner

Reputation: 1014

An example of how to add nested records in a form:

    <%= form.fields_for :headers, get_headers(client) do |builder| %>
      <div>
        <div class="header-fields form-row">
          <%= builder.hidden_field :id %>
          <div class="form-group col col-md-4">
            <%= builder.label :key %>
            <%= builder.text_field :key, class: 'form-control' %>
          </div>
          <div class="form-group col col-md-6">
            <%= builder.label :value %>
            <%= builder.text_field :value, class: 'form-control', value: builder.object.value %>
          </div>
          
          <% if action_name == "edit" %>
          <div class="form-group col col-md-2">
            <div class="form-check">
              <%= builder.check_box :_destroy, class: 'form-check-input' %>
              <%= builder.label :_destroy, "Destroy?", class: 'form-check-label' %>
            </div>
          </div>
          <% end %>
        </div>
      </div>
    <% end %>

Helper function

def get_headers(client)
  return client.headers if client.headers.any?
  [Header.new]
end

Controller params

def client_params
  params.require(:client).permit(headers_attributes: [:id, :key, :value, :_destroy])
end

Model:

class Client < ApplicationRecord
  has_many :headers, dependent: :destroy
  accepts_nested_attributes_for :headers, allow_destroy: true
end

Then JS as required for adding / removing rows.

Upvotes: 0

Related Questions