Summernote editor not working with nested forms

Question

I'm trying to use cocoon-gem and summernote-gem in my ruby-on-rails app.
This is my model:

class Dog < ApplicationRecord
    has_many :pictures, as: :imageable, dependent: :destroy
    accepts_nested_attributes_for :pictures, reject_if: :all_blank, allow_destroy: true
end

At first look new or edit page seems alright. First summary field render with summernote correctly. And if I already have several pictures saved to my dog model, they all look perfectly fine on editing page. But when I click on "add picture" it creates new picture field with summary field not rendered properly with summernote. In html page it looks like this:

<div class="field">
    <label class="string optional" for="dog_pictures_attributes_1544609860934_summary">Summary</label>
    <textarea data-provider="summernote" name="dog[pictures_attributes][1544609860934][summary]" id="dog_pictures_attributes_1544609860934_summary"></textarea>
</div>

Instead of this:

<div class="field">
    <label class="string optional" for="dog_pictures_attributes_1_summary">Summary</label>
    <textarea data-provider="summernote" name="dog[pictures_attributes][1][summary]" id="dog_pictures_attributes_1_summary" style="display: none;"></textarea>
    <div class="note-editor note-frame">...</div>
</div>

This is my _form.erb: (if relevant)

<%= simple_form_for @dog, defaults: { required: false } do |f| %>
  <div class="field">
    <%= f.label 'Note' %>
    <%= f.text_area :note, 'data-provider': :summernote %>
  </div>
  <h2> Add pictures </h2>
  <%= f.fields_for :pictures do |picture| %>
    <%= render 'picture_fields', :f => picture %>
  <% end %>
  <div class='links'>
    <%= link_to_add_association 'add picture', f, :pictures %>
  </div>
  <div class="actions">
    <%= f.submit %>
  </div>
<% end %>

And this is my _picture_fields.erb:

<div class='nested-fields'>
  <div class="field">
    <%= f.file_field :image %>
  </div>
  <div class="field">
    <%= f.label :author %>
    <%= f.text_field :author %>
  </div>
  <div class="field">
    <%= f.label :summary %>
    <%= f.text_area :summary, 'data-provider': :summernote %>
  </div>
    <%= link_to_remove_association "remove picture", f %>
</div>

I also tried to build nested form from scratch with drifting ruby. But it cause the same problem

Answer 1

When dynamically inserting items into the page, you will have to initialize the summernote editor on those items as well. Cocoon has callbacks to allow you to do this.

When loading the page, to initialize summernote, you would do something like

$('[data-provider="summernote"]').each ->
    $(this).summernote

(copied from the summernote-rails gem documentation)

But this only works for the "summernote"'s already on the page, it cannot initialize notes that are not yet there.

So, after inserting a nested-items we have to use the same code to initialise the inserted notes. Something like this should work:

$('form').on('cocoon:after-insert', function(e, insertedItem) {
    insertedItem.find('[data-provider="summernote"]').each(function() {
      $(this).summernote();  
    })  
});

This will look for summernote items in the freshly nested-item and initialise those.

[EDIT: improve javascript to extract it from view]

Javascript files are generally grouped in app/assets/javascripts, if you are editing Dogs let's add a new file dogs.js and enter the following code:

$(document).on('cocoon:after-insert', 'form', function(e, insertedItem) {
    insertedItem.find('[data-provider="summernote"]').each(function() {
      $(this).summernote();  
    })  
});

Then add this file to your application.js using require dogs.

This code registers an event handler on the document, it will listen to any cocoon:after-insert event triggered on a form. If you have multiple forms using cocoon, you might need a better/more precise css selector (e.g. add a class to the form and add that as well).