使用CoffeeScript动态将字段添加到simple_form

Question

I have a Rails 5.1.3 app that is using simple_form 3.5

I have a Books table and within that a Postgres array column that holds authors . I've manage to build all the logic to successfully populate and save the array, however I'm struggling with dynamically adding a new author field to the form using CoffeeScript.

new.html.erb

<%= simple_form_for @book do |f| %>
    <%= f.input :title %>
    <%= f.input :subtitle %>
    <%= f.input :authors, as: :array %>
    <%= f.button :submit, "Add aditional author", class: "add-author-button" %>
    <%= f.input :description %>
    <%= f.button :submit %>
<% end %>

array_input.coffee

$(document).ready ->
  $('.add-author-button').on 'click', @addAuthorField

  addAuthorField: (ev) ->
    ev.preventDefault()
    $lastAuthorField = $('input[name="book[authors][]"]:last-of-type').clone()
    $lastAuthorField.val("")
    $(".text.optional.book_authors").append($lastAuthorField)

The problem I have is that when I click the 'Add additional author' button the form submits rather than appending a blank text field to the form. If I let the validations for the other columns fail, the form re-renders with an extra author field.

Answer 1

You should explore cocoon . It does what you want, and it probably does it better, what if you want to edit the same record, remove authors, etc?

Given that your models have the following configuration:

class Book < ActiveRecord::Base
  has_many :authors, inverse_of: :book
  accepts_nested_attributes_for :authors, reject_if: :all_blank, allow_destroy: true
end

class Author < ActiveRecord::Base
  belongs_to :book
end

Your form:

<%= simple_form_for @book do |f| %>
  <%= f.input :title %>
  ...
  <h3>Authors</h3>
  <div id="authors">
    <%= f.simple_fields_for :authors do |author| %>
      <%= render 'author_fields', f: author %>
    <div class="links">
      <%= link_to_add_association 'add author', f, :authors %>
    </div>
  </div>
  <%= f.submit %>

And a _author_fields partial:

<div class="nested-fields"
  <%= f.input :name %>
  <%= link_to_remove_association 'remove author', f %>
</div>