Cocoon gem won't render partial using simple_form and Zurb4 under Rails 4

Question

* EDIT *

I am using a Foundation theme and I believe the problem lies therein. I created a new basic app and had no issues until I added the theme. I will update this when I find the culprit.

* PREVIOUS EDIT *

I wanted to eliminate some of the variables in the scenario, so I tested this by using form_for instead of simple_form_for with no success.

In Cocoon's doc, it mentioned :wrapper => 'bootstrap' option for newer versions of Bootstrap and I did use the similar foundation wrapper that simple_form provides with no success.

= simple_form_for @group, :wrapper => 'foundation', :html => {:class => 'form-vertical' } do |f|
...
= f.simple_fields_for :solicitations do |solicitation|
  = render 'solicitation_fields', :f => solicitation
.links
  = link_to_add_association "Add Invitation?", f, :solicitations, :render_options => { :wrapper => 'foundation' }

I removed much of the styling in the event it is a factor. It isn't.

FWIW, I am using Ruby 2.1 as recommended on the Rails site. Plus, I have a headache from excessive wall banging.

The bottom line question: Why is the trigger that displays the partial not working?

* END EDIT *

I would very much like to use Nathanvda's Cocoon gem, but cannot get the associated nested form to show after clicking the link_to_add_to_association. A confirm message does appear. I seem to be missing something or perhaps my use of simple_form, zurb, and cocoon complicate the solution.

• rails 4.0.2
• simple_form 3.0.1
• zurb-foundation 4.3.2
• cocoon 1.2.5

Files:

... Models

class Group < ActiveRecord::Base
  has_many :solicitations, :dependent => :destroy
  accepts_nested_attributes_for :solicitations, reject_if: :all_blank

class Solicitation < ActiveRecord::Base
  belongs_to :group

... Controller

class GroupsController < ApplicationController
  before_action :authenticate_user!
  before_action :set_group, only: [:show, :edit, :update, :destroy]
  before_action :set_current_user, only: [:index, :edit, :update, :create]

  def new
    @group = Group.new
    respond_to do |format|
      format.html
      format.json { render json: @group }
    end
  end

  def create
    @group = Group.new(group_params)
    respond_to do |format|
      if @group.save
        format.html { redirect_to action: :index, notice: 'Group was successfully created.' }
        format.json { render json: @group, status: :created, location: @group }
      else
        format.html { render action: "new" }
        format.json { render json: @group.errors, status: :unprocessable_entity }
      end
    end
  end

  private

    def group_params
      params.require(:group).permit( :name, :id,
        solicitations_attributes: [ :id, :email, :name, :role, :_destroy ] )

... Form Partial _solicitation_fields.html.haml

= simple_form_for @group, :html => {:class => 'form-vertical' } do |f|
  = f.error_notification
  .fields
    .row
      .large-12.columns
        = f.input :name, :required => true, placeholder: 'A descriptive group name'
    %hr
      .large-12.columns
      %h4 Group Solicitations
      .large-12.columns
        %table.responsive
          %thead
            %tr
              - headings = ["* Name", "* Email", "* Role", ""]
              - headings.each do |heading|
                %th= heading
          %tbody
            = f.simple_fields_for :solicitations do |solicitation|
              = render 'solicitation_fields', :f => solicitation
            .links
              = link_to_add_association "Add Solicitation?", f, :solicitations, confirm: "Does this work?"
      .large-12.columns
      .row
        .large-12.columns
          = f.error :base
          = f.button :submit, class: "button radius"

... groups.js
$(document).ready(function() {
    $('#solicitations').bind('cocoon:before-insert', function(e,solicitation_to_be_added) {
        solicitation_to_be_added.fadeIn('slow');
    });

    $('#solicitations').bind('cocoon:after-insert', function(e, added_solicitation) {
        //added_solicitation.css("background","red");
    });

    $('#solicitations').bind('cocoon:before-remove', function(e, solicitation) {
        $(this).data('remove-timeout', 1000);
        solicitation.fadeOut('slow');
    })

});...

Frankly, I'm a weak on the js side of things. I've been working on this for several days and don't want to quit, so any help or direction would be appreciated. I have seen that Bootstrap requires some inline wrappers to work with cocoon and simple_form, but it does seem the simple_form initializer has changed quite a bit from nathanvda's demo example on github.

Also, I can display the partial when I explicitly put @group.solicitations.build in the controller action, but I do not see that process in the demo.

Answer 1

I decided to substitute the nested_form gem for the cocoon gem, and it also failed. The problem was with the theme and its requirement to put the gem's js directive in its own special manifest. The theme's documentation did not mention this. It did not occur to me cocoon.js was not loading. Works fine now.