Using Cocoon Gem in Rails 5 to create nested forms within nested forms

Currently, I am experimenting with the cocoon gem to construct nested forms efficiently.

Within my application, I have defined models for Organisation, Package::Bip, and Tenor.

The relationships between these models are as follows:

Organisation

 has_many :bips, as: :ipable, class_name: Package::Bip
    accepts_nested_attributes_for :bips,  reject_if: :all_blank, allow_destroy: true

Package::Bip (polymorphic)

 belongs_to :ipable, :polymorphic => true, optional: true, inverse_of: :bip

  has_one :tenor, as: :tenor
    accepts_nested_attributes_for :tenor,  reject_if: :all_blank, allow_destroy: true

Tenor (polymorphic)

belongs_to :tenorable, :polymorphic => true, optional: true

The forms setup includes:

In my organisations/_form.html.erb file, it is structured as:

<%= f.simple_fields_for :bips do |f| %>
      <%= f.error_notification %>
        <%= render 'package/bips/bip_fields', f: f %>

    <% end %>

    <%= link_to_add_association 'Add another intellectual property resource', f, :bips, partial: 'package/bips/bip_fields' %>

Within the nested form bip_fields.html.erb, the configuration includes:

<%# if @package_bips.tenor.blank? %> 
  <%= link_to_add_association 'Add timing', f, :tenor, partial: 'tenors/tenor_fields' %>  
<%# end %>

<%= f.simple_fields_for :tenor do |tenor_form| %>
  <%= f.error_notification %>
    <%= render 'tenors/tenor_fields', f: tenor_form %>
<% end %> 

Javascript Integration

For handling associations, a specific JavaScript file is necessary according to cocoon documentation. In my tenor_subform.js file, the implementation looks like this:

$(document).ready(function() {
    $(".add_tenor a").
      data("association-insertion-method", 'append').
      data("association-insertion-node", function(link){
        return link.closest('.row').next('.row').find('.tenor_form')
      });
});

Controller Side

Within the organisation controller, the method setup includes:

def new
    @organisation = Organisation.new
    @organisation.bips
end

Note: There is a doubt regarding the necessity of adding an extra line in the new action to establish the organisation.bip.tenor instance. Additionally, uncertainty arises concerning the imperative of adding a has_one through association in organisation.rb that points to tenor.

def organisation_params
      params.fetch(:organisation, {}).permit(:title,  :comment,

          bips_attributes:            [:id, :status,  :_destroy,
            tenor_attributes:           [:id,:commencement, :expiry,                      :_destroy]

        ],

The tenor controller has the following configuration:

def tenor_params
      params.require(:tenor).permit( :commencement, :expiry)
    end

Error Analysis

Queries arise regarding the inclusion of tenor actions in the organisation controller, acting as the parent of bip, which is the parent of tenor.

Upon executing the setup and attempting to proceed, a specific error emerges:

unknown attribute 'tenor_id' for Tenor.

When researching similar errors on Stack Overflow, the recurring cause often relates to the lack of whitelisting the :id attribute in the parent class. Despite addressing this concern, the error persists.

Is there anyone who can pinpoint the flaw in my implementation?

Tenor Controller Overview

class TenorsController < ApplicationController

  before_action :set_tenor, only: [:show, :edit, :update, :destroy]
  before_action :authenticate_user!
  # after_action :verify_authorized

  def index
    @tenors = Tenor.all
    # authorize @tenors
  end

    def show

  end

  def new
    @tenor = Tenor.new
    # authorize @tenor
  end

  def edit

  end

  def create
    @tenor = Tenor.new(tenor_params)
    # authorize @tenor

    respond_to do |format|
      if @tenor.save
        format.html { redirect_to @tenor }
        format.json { render :show, status: :created, location: @tenor }
      else
        format.html { render :new }
        format.json { render json: @tenor.errors, status: :unprocessable_entity }
      end
    end
  end

  def update
   respond_to do |format|
      if @tenor.update(tenor_params)
        format.html { redirect_to @tenor }
        format.json { render :show, status: :ok, location: @tenor }
      else
        format.html { render :edit }
        format.json { render json: @tenor.errors, status: :unprocessable_entity }
      end
    end
  end

   def destroy
    @tenor.destroy
    respond_to do |format|
      format.html { redirect_to action: :index }
      format.json { head :no_content }
    end
  end

  private
    def set_tenor
      @tenor = Tenor.find(params[:id])
      # authorize @tenor
    end

    def tenor_params
      params.require(:tenor).permit(:express_interest, :commencement, :expiry, :enduring, :repeat, :frequency)
    end

end

Answer №1

Your has_one relationship is misdeclared. Using as: :tenor wrongly instructs it to search for a tenor_id.

To correct this, you should declare it as:

has_one :tenor, as: :tenorable 

Answer №2

Your model is missing the inverse_of attribute for the nested_attr.Add method with the id of #{model}.

Here's an example:

class Tenor < ActiveRecord::Base
  has_many :traps, :inverse_of => :bips

For more information, you can refer to this or this documentation.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Uncover the secrets of HTML with JavaScript

I'm facing an issue with extracting data from a link's data attribute and trying to decode the HTML within it, but unfortunately, it's not functioning as expected. Check out my code on JSFiddle: http://jsfiddle.net/Kd25m/1/ Here's the ...

React Native error - "Invalid element type: expected a string or class/function, but received undefined" - encountering issue with importing a custom library?

Alright, I'm looking to make some modifications to this library, so I am attempting to import the non-transpiled version by downloading the repository and importing it from here: https://github.com/nicotroia/react-native-floating-action-menu#readme A ...

Transitioning JS/CSS effects when the window is inactive

My latest project involved creating a small slider using JavaScript to set classes every X seconds, with animation done through CSS Transition. However, I noticed that when the window is inactive (such as if you switch to another tab) and then return, the ...

What is the best way to isolate particular components of an argument and store them in separate variables?

Currently, I am facing a challenge in extracting the name and id of an emoji from a discord argument using discord.js. The input provided to me is <:hack_wump:670702611627769876>, and my goal is to retrieve var id = '670702611627769876' alo ...

Turn on the text field when the enter key is pressed

I've searched online for solutions, but none of them have resolved my issue. Upon loading my page, I am able to successfully have my JS file select the first textfield. However, I am struggling with getting it to proceed to the next textfield when th ...

Is it achievable for a modal popup to automatically move to a specified location?

I need assistance with... Is it feasible to display an external webpage within a modal window and have that page automatically scroll to a specific section (such as an anchor point)? ...

Error code "ER_BAD_FIELD_ERROR" was encountered with errno 1054 and sqlState "42S22" in index 0 while using MySQL with Angular and managing sessions

When I log in, the following code is executed: <div ng-include="'partials/navbar'"></div> <form name="form" ng-submit="login(form)"> <div> <input type="text" placeholder="Email" ...

Is there a way to programmatically simulate clicking on the "Cancel search" button?

I have a text input field with type "search". In order to perform UI testing, I need to simulate clicking on the "cancel search" button: https://i.sstatic.net/ahcwQ.png The code for this specific input field is as follows: <input type="search" value= ...

Showing button based on a particular value

I am trying to dynamically display a button based on the value of the sendSMS property for the logged-in user. I have added this property in the viewer model, which is connected to the user's base model. However, I am encountering difficulties with us ...

Having trouble with window.setInterval in AngularJS?

My coding snippet involves the use of the setInterval method: function MyController($scope) { $scope.clock = new Date(); var updateClock = function() { $scope.clock = new Date(); }; setInterval(updateClock, 1000); }; The HTML asso ...

The TS2769 error occurs when trying to change the react calendar due to no matching overload in the

The calendar functionality in my project was implemented using the response calendar library. Suddenly, I encountered an onChange prop error in the default code. This was working fine before. What steps should I take to resolve this issue? Here is my cod ...

Executing Node.js child processes: streaming stdout to console as it happens and running the processes one after the other

Details node: v9.4.0 I am looking for a solution to execute external commands sequentially while monitoring the stdout in real-time. The code snippet below demonstrates my attempt to retrieve all test cases from ./test/ and then running them one after ...

Angular 5 - Strategies for excluding specific properties from Observable updates

Currently, I am in the process of developing a webpage where users can view and like various videos. The video content and user likes are stored in a database, and I have implemented two Angular services for handling data retrieval and storage. However, I ...

When utilizing styled-jsx alongside postcss, experiencing issues with styles failing to reload or rebuild

I'm currently using postcss in conjunction with styled-jsx. In my setup, I have multiple CSS files that I'm importing using the @import directive within the _app.js file. Everything seems to work smoothly, except when I modify any of the CSS file ...

Incorporating a Registration Popup Form in ASP.NET

Looking to implement an Ajax popup for a registration form on my ASP.NET page. What is the recommended approach to achieve this? How can I ensure that my database is updated without needing to refresh the page? ...

What is the best way to send variables from JavaScript to PHP while utilizing Ajax technology?

While I have noticed similar questions like this one before, I want to address my specific concerns. In previous examples, the questioner referred to using Ajax in a format similar to this: $.ajax({ type: "POST", url: 'logtime.php', ...

Recursive array generation

Given an array 'featureList', the goal is to create a new array 'newArray' based on a specific ID. For example, for ID 5, the newArray would be ['MotherBoard','Antenna','Receiver'], where Receiver correspon ...

Utilizing ajax for a particular scenario within the Rails framework

I implemented a dropdown login form that redirects the user to the root path upon successful login, or updates the form with an error message if the login fails without refreshing the page. To achieve this, I utilized AJAX to display the error message. T ...

How can I adjust the timeout or enhance my code for Excel Online's ExcelScript error regarding the Range getColumn function timing out?

I am struggling with a code that is supposed to scan through the "hello" sheet and remove any columns where the top cell contains the letter B: function main(workbook: ExcelScript.Workbook) { let ws = workbook.getWorksheet("hello"); let usedrange = ws ...

Printing dynamic data

When the print button is clicked, I need to print dynamically generated data from a table that has an ID. The table data (td and tr) is dynamically generated. I have successfully retrieved the table data and attempted to print everything using window.prin ...