We Keep Coding

Rails & JQuery: Invalid association. Make sure that accepts_nested_attributes_for is used for

Although I'd like to add link_to_add with using simple_nested_form_for, the following error was displayed.
ArgumentError (Invalid association. Make sure that accepts_nested_attributes_for is used for :events association.):
There are similar questions in stackoverflow, but it doesn't work for me. So I post this as a new question.
The error was appeared when I add f.link_to_add in _schedule_form.html.erb.
_schedule_form.html.erb
<%= f.label :title %>
<%= f.text_field :title, class: 'form-control' %>
<br>
<%= f.label :departure_date %>
<div class="input-group date" id="datetimepicker">
<%= f.text_field :departure_date, class: 'form-control' %>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker').datetimepicker({format:'MMM-DD-YYYY'});
});
</script>
<br>
<div id="room">
<%= f.simple_fields_for :rooms do |a| %>
<p class="day-number-element-selector"><b>Day <%= a.index.to_i + 1 %></b></p>
<div id="event">
<% a.simple_fields_for :events do |e| %>
<%= e.input :from %>
<% end %>
</div>
#add here!!!
<%= f.link_to_add "Add event", :events, data: {target: '#event'}, class: "btn btn-primary" %>
<%= a.input :room %>
<% end %>
</div>
new_html.erb
<div class="row">
<div class="col-md-12">
<p>Create schedule</p>
<%= simple_nested_form_for(#schedule) do |f| %>
<%= render 'schedule_form', f: f %>
<%= f.submit "Create my schedule", class: "btn btn-primary" %>
<br>
<% end %>
</div>
</div>
Give the following models:
class Schedule < ActiveRecord::Base
belongs_to :user
has_many :rooms
accepts_nested_attributes_for :rooms, allow_destroy: true
...
class Room < ActiveRecord::Base
belongs_to :schedule
has_many :events
accepts_nested_attributes_for :events, allow_destroy: true
...
class Event < ActiveRecord::Base
belongs_to :room
...
schedule_controller.rb
class SchedulesController < ApplicationController
...
before_action :set_schedule, only: %i(show edit update destroy)
...
def new
#schedule = Schedule.new
room = #schedule.rooms.build
room.events.build
end
def create
#schedule = current_user.schedules.build(schedule_params)
if #schedule.save
flash[:success] = "schedule created!"
redirect_to root_url
else
render 'new'
end
end
def edit
#day_max = Room.where("schedule_id = ?", #schedule.id).maximum(:day)
end
def update
#schedule.rooms.maximum(:day)
if #schedule.update(schedule_params)
flash[:success] = "schedule updated!"
redirect_to root_url
else
render 'edit'
end
end
private
def schedule_params
params.require(:schedule).permit(:title, :departure_date, rooms_attributes: [:id, :_destroy, :room, :day, events_attributes: [:id, :_destroy, :from, :to, :title, :detail]])
end
def set_schedule
#schedule = Schedule.find(params[:id])
end
No error have been displayed before adding link_to_add.
It would be appreciated if you could give me any suggestion.
SOLVED!!!
<div id="room">
<%= f.simple_fields_for :rooms do |a| %>
<div id="room_<%= a.object.object_id %>">
<p class="day-number-element-selector"><b>Day <%= a.index.to_i + 1 %></b></p>
<%= a.simple_fields_for :events do |e| %>
<span class="form-inline">
<%= e.input :from, label: false %>
<%= e.input :to, label: false%>
</span>
<%= e.input :title, label: 'event' %>
<% end %>
</div>
<%= a.link_to_add "Add event", :events, data: {target: "#room_#{a.object.object_id}"}, class: "btn btn-primary" %>
<%= a.input :room %>
<% end %>
</div>

div#room should be something like :
<div id="room">
<%= f.simple_fields_for :rooms do |a| %>
<p class="day-number-element-selector"><b>Day <%= a.index.to_i + 1 %></b></p>
<% a.simple_fields_for :events do |e| %>
<div id="event">
<%= e.input :from %>
</div>
<% end %>
#add here!!!
<%= a.link_to_add "Add event", :events, data: {target: '#event'}, class: "btn btn-primary" %>
<%= a.input :room %>
<% end %>
</div>

First of all nested_form gem is abandoned, so I would suggest to use cocoon which is up to date now
Also probably you attributes filtered
room_attributes: [..., events_attributes: [...]]
As your attributes for rooms should be in plural form rooms_attributes
And the last suggestion do not use multi nesting. Try to have a look on form objects pattern
Hope it helps

How to Create Nested Forms in Rails 4

I'm trying to let a user create Exercises with Equipment and Muscles in many-to-many relationships through their respective join tables( exercise_equipment, exercise_muscles ). I've gotten the form working for adding one equipment/muscle per exercise, but cannot figure out how to add a link to add another field to the form on the fly.
I've checked out RailsCasts, this post, have asked it as a side question on a previous post of my own, but simply cannot get this functionality to work. I'm fairly new to Rails 4 and am still trying to learn Javascript, but I'd love a thorough explanation of how to set this up the Rails 4 way!
My Models:
# id :integer
# name :string
# is_public :boolean
Exercise
has_many :exercise_equipment
has_many :equipment, :through => :exercise_equipment
accepts_nested_attributes_for :exercise_equipment
# id :integer
# exercise_id :integer
# equipment_id :integer
# optional :boolean
ExerciseEquipment
belongs_to :exercise
belongs_to :equipment
accepts_nested_attributes_for :equipment
# id :integer
# name :string
Equipment
has_many :exercise_equipment
has_many :exercises, :through => :exercise_equipment
My Controller Methods:
def new
#exercise = Exercise.new
#exercise.exercise_equipment.build
#exercise.exercise_muscles.build
end
def create
exercise = current_user.exercises.new( exercise_params )
if exercise.save!
redirect_to exercise
else
render 'new'
end
end
views/exercises/new.html.erb
<h1>Create New Exercise</h1>
<%= form_for #exercise do |f| %>
<%= render 'form', f: f %>
<%= f.submit "New Exercise" %>
<% end %>
views/exercises/_form.html.erb
<%= f.label :name %><br />
<%= f.text_field :name, autofocus: true %>
<%= f.check_box :is_public %> Public
<%= f.fields_for :exercise_muscles do |emf| %>
<%= emf.collection_select :muscle_id, Muscle.all, :id, :name, { include_hidden: false } %>
<% end %>
<%= f.fields_for :exercise_equipment do |eef| %>
<%= eef.collection_select :equipment_id, Equipment.all, :id, :name, { include_hidden: false } %>
<%= eef.check_box :optional %> Optional
<% end %>

Ajax
Cannot figure out how to add a link to add another field to the form
on the fly
The "Rails way" of doing that is to "pull" a new instance of the fields_for block from an ajax request.
The reason why Ajax is recommended is because it's the "Rails way" to do it - completely modular & extensible:
#config/routes.rb
resources :exercises do
get :add_field, on: :collection
end
#app/models/exercise.rb
Class Exercise < ActiveRecord::Base
...
def self.build #-> allows you to call a single method
exercise = self.new
exercise.exercise_equipment.build
exercise.exercise_muscles.build
return
end
end
#app/controllers/exercises_controller.rb
Class ExercisesController < ApplicationController
def add_field
#exercise = Exercise.build
respond_to do |format|
format.html
format.js
end
end
end
#app/views/exercises/new.html.erb
<%= form_for #exercise do |f| %>
<%= render "fields", locals: { f: f } %>
<%= f.submit %>
<% end %>
#app/views/exercises/add_field.js.erb
$("#form_element").append("<%=j render "exercises/form", locals: { exercise: #exercise } %>");
#app/views/exercises/_form.html.erb
<%= form_for exercise do |f| %>
<%= render "fields", locals: { f: f } %>
<% end %>
#app/views/exercises/_fields.html.erb
<%= f.fields_for :exercise_muscles, child_index: Time.now.to_i do |emf| %>
<%= emf.collection_select :muscle_id, Muscle.all, :id, :name, { include_hidden: false } %>
<% end %>
<%= link_to "New Field", exercises_add_fields_path, remote: :true %>
<%= f.fields_for :exercise_equipment, child_index: Time.now.to_i do |eef| %>
<%= eef.collection_select :equipment_id, Equipment.all, :id, :name, { include_hidden: false } %>
<%= eef.check_box :optional %> Optional
<% end %>
<%= link_to "New Field", exercises_add_fields_path, remote: :true %>
This will give you the ability to create the fields through an ajax call; which is the correct way to do it

After attempting to use Rich's solution, I wanted to find one that was a bit more minimal in terms of the code used. I found the gem Cocoon, which works great and was very simple to integrate.
My main _form view:
<div class="form-group">
<%= f.label :name %><br />
<%= f.text_field :name, autofocus: true %>
</div>
<div class="form-group">
<%= f.check_box :is_public %> Public
</div>
<div class="form-group">
<%= f.fields_for :exercise_muscles do |emf| %>
<%= render 'exercise_muscle_fields', :f => emf %>
<% end %>
<%= link_to_add_association 'Add Muscle', f, :exercise_muscles %>
</div>
<div class="form-group">
<%= f.fields_for :exercise_equipment do |eef| %>
<%= render 'exercise_equipment_fields', :f => eef %>
<% end %>
<%= link_to_add_association 'Add Equipment', f, :exercise_equipment %>
</div>
As can be seen here, the addition of a simple "link_to_add_association" method takes care of all of the Javascript in the background. For future readers, here are the partials that each of these form-groups contain:
_exercise_muscle_fields:
<%= f.collection_select :muscle_id, Muscle.all.order( 'muscle_group_id ASC' ), :id, :name, { include_hidden: false } %>
_exercise_equipment_fields:
<%= f.collection_select :equipment_id, Equipment.all.order( 'name ASC' ), :id, :name, { include_hidden: false } %>
<%= f.check_box :optional %> Optional

How to pass id from javascript to rails forms

I want to pass the selected value from the drop down to fullcalendar plugin and the rails form
The select tag
<%= form_tag appointments_path, :html => {:id => "form-1"} do %>
<%= select_tag(:worker_id, options_from_collection_for_select(#client.workers, :id, :name), :selected => #a, :style=>"width:170px;", :prompt => "Select Staff Member")%>
<% end %>
I am passing the #a variable by ajax to
<script>
$('#worker_id').change(function (e) {
var a = parseInt($(this).val());
alert(a);
$.ajax({
type: "GET",
url:"/customers/new",
data : { id: a },
success:function(result){
$('#content1').html("<%= escape_javascript(render :partial =>'form', :locals => ????) %>");
}
});
$('#calendar').fullCalendar('destroy');
RenderCalendar($(this).val());
});
</script>
I am not sure whether i am doing it in right way. I want to pass the value in form which is here:
<%= form_for(#customer) do |f| %>
<%#= f.error_notification %>
<div class="field">
<%#= f.label :Service_Name %>
<%#= f.collection_select :service_id, Category.where(:client_id => #client).order(:name), :services, :name, :id, :service_name %>
</div>
<br /> <br />
<%= f.fields_for :appointments do |builder|%>
<fieldset>
<% if #a!=0 %>
<%= builder.hidden_field :worker_id, :value=> #customer.worker_id %>
<%= builder.hidden_field :client_id, :value=> #client.id%>
<%= builder.label :price %>
<%= builder.text_field :price %>
<%= builder.label :Service_Name %>
<%= builder.collection_select(:service_id, #a.order(:service_name), :id, :service_name, :include_blank => true, :multiple => true ) %>
<% end %>
<%= builder.label :appointment_date %>
<%= builder.date_select :appointment_date %> <br />
<%= builder.label :appointment_start_time %>
<%= builder.time_select :appointment_start_time, ampm: true %> <br />
<%= builder.label :appointment_end_time %>
<%= builder.time_select :appointment_end_time, ampm: true %>
</fieldset>
<%end%>
<div class="field">
<%= f.label :title %>
<%= f.text_field :title %>
</div>
<div class="field">
<%= f.hidden_field :worker_id, :value=>#customer.worker_id %>
</div>
<div class="form-actions">
<%= f.button :submit, :class=>"btn btn-primary" %>
</div>
<% end %>

If I understand correctly: you are trying to rerender the fullcalender jquery plugin with your ajax success callback based on the user selected from the select tag here:
<%= form_tag appointments_path, :html => {:id => "form-1"} do %>
<%= select_tag(:worker_id, options_from_collection_for_select(#client.workers, :id, :name), :selected => #a, :style=>"width:170px;", :prompt => "Select Staff Member") %>
<% end %>
There is an inherent issue with the way you're trying to do this. Any embedded ruby in your views will run only once at runtime. Essentially, your escape_javascript(render partial..... will not run because any embedded ruby is done running at that point.
What you could do is keep the ajax call you already have but run the render partial code in your '/customers/new', instead of trying to call it in the ajax callback -which is after runtime
render :partial =>'form', :locals => ????
This will return the partial code with which you want to then place on the page. With your ajax, simply place it on the page something like this:
success:function(result){
$('#content1').html(result);
}

Undefined form variable when rendering a partial in rails after an AJAX call

I have been trying for a while to implement a dynamic dependent form using AJAX in rails 4.0. I have a bike model which has_one make and model. It also has_many quotes. The goal is to have the second form's collection field (model) populate after the first field make is selected.
The form loads correctly and the AJAX call once the first field is selected is made and returns the appropriate set of data (confirmed via puts in the console). However, I am unable to figure out how to then render the partial appropriately. I am getting the error below. I understand there is no f variable once the partial is rendered via the AJAX call but how do I go about designing the form without the f variable?
ActionView::Template::Error (undefined local variable or method `f' for #<#<Class:0x007f95b0fc2068>:0x007f95b54e2490>):
1: <%= f.label :name, 'Model' %>
2: <% if !current_models.blank? %>
3: <%= f.collection_select :name, current_models.collect{ |m| [m.name,m.id]}, :id , :name, include_blank: true %>
4: <% else %>
app/views/shared/_model_questions_fields.html.erb:1:in `_app_views_shared__model_questions_fields_html_erb__894239665582553972_70140482609500'
app/controllers/quotes_controller.rb:70:in `update_model_select'
quotes/new.html.erb
<%= form_for #quote do |f| %>
<%= f.fields_for :bikes do |builder| %>
<p><%= render 'shared/bike_questions_fields', :f => builder %></p>
<% end %>
<%= f.submit "Show Quote", class: "btn btn-large btn-primary" %>
<% end %>
'shared/bike_questions_fields'
<%= f.fields_for :makes do |builder| %>
<p><%= render 'shared/make_questions_fields', :f => builder %></p>
<% end %>
<%= f.fields_for :models do |builder| %>
<div id="bikeModels"
<p><%= render 'shared/model_questions_fields', :f => builder, :current_models => [] %></p>
</div>
<% end %>
'shared/model_questions_fields'
<%= f.label :name, 'Model' %>
<% if !current_models.blank? %>
<%= f.collection_select :name, current_models.collect{ |m| [m.name,m.id]}, :id , :name, include_blank: true %>
<% else %>
<%= f.collection_select :name, [], :id , :name, include_blank: true %>
<% end %>
in quotes controller:
def update_model_select
models = Model.where(:make_id=>params[:id]).order(:name) unless params[:id].blank?
render :partial => "shared/model_questions_fields", :locals => { :current_models => models }
end
in quotes.js.coffee:
ready = ->
jQuery ($) ->
# when the #make field changes
$("#quote_bikes_makes_name").change ->
# make a POST call and replace the content
make = $("select#quote_bikes_makes_name :selected").val()
make = "0" if make is ""
jQuery.get "/quotes/update_model_select/" + make, (data) ->
$("#bikeModels").html data
false
$(document).ready(ready)
$(document).on('page:load', ready)

I solved this by changing 'shared/model_questions_fields' to:
<%= form_for('quote', remote: true) do |f| %>
<%= f.fields_for :bikes do |g| %>
<%= g.fields_for :models do |i| %>
<%= i.label :name, 'Model' %>
<% if !current_models.blank? %>
<%= i.collection_select :name, current_models, :id , :name, include_blank: true %>
<% else %>
<%= i.collection_select :name, [], :id , :name, include_blank: true %>
<% end %>
<% end %>
<% end %>
<% end %>

Rails 3: How to add/remove a group of fields using Jquery?

I'm trying to figure out how to add and remove a group of fields in my Rails 3 app using Jquery. I got the jquery script to work with plain html, which you can see here: http://jsfiddle.net/beehive/ABvFH/1/
However, I can't figure out how to translate this to Rails 3. More specifically, what do I replace "formfield" with in the application.js file for this to work?
application.js
$(document).ready(function() {
$(function() {
var x = $('#uploadform');
var i = $('#uploadform ul').size() + 1;
$('#addmore').live('click', function() {
if ($(".item", x).length < 9) {
$('<ul class="item" class="field">formfield ' + i + ' Remove</p>').appendTo(x);
i++;
}
return false;
});
$('#remfields').live('click', function() {
if (i > 2) {
$(this).parents('ul').remove();
i--;
}
return false;
});
});​
});
form.html.erb
<%= form_for(#upload) do |f| %>
<% if #upload.errors.any? %>
<div id="error_explanation">
<h2><%= pluralize(#upload.errors.count, "error") %> prohibited this upload from being saved:</h2>
<ul>
<% #upload.errors.full_messages.each do |msg| %>
<li><%= msg %></li>
<% end %>
</ul>
</div>
<% end %>
<h2>Add More Fields</h2>
<div id="uploadform">
<ul class="field">
<li>
<%= f.label :title %><br />
<%= f.text_field :title %>
</li>
<li>
<%= f.label :genre %><br />
<%= f.collection_select :genre, Upload::GENRES, :to_s, :to_s, :include_blank => true %>
</li>
<li>
<%= f.label :category %><br />
<%= f.collection_select :category, Upload::CATEGORIES, :to_s, :to_s, :include_blank => true %>
</li>
<li>
<%= f.label :age %><br />
<%= f.collection_select :age, Upload::AGES, :to_s, :to_s, :include_blank => true %>
</li>
</ul>
</div>
<div class="actions">
<%= f.submit %>
</div>
<% end %>

All I had to do to get it to work is comment $(function() {
$(document).ready(function() {
//$(function() {
var x = $('#uploadform');
var i = $('#uploadform ul').size() + 1;
$('#addmore').live('click', function() {
if ($(".item", x).length < 9) {
$('<ul class="item" class="field">formfield ' + i + ' Remove</p>').appendTo(x);
i++;
}
return false;
});
$('#remfields').live('click', function() {
if (i > 2) {
$(this).parents('ul').remove();
i--;
}
return false;
});
//});​
});
Edit:
What do you mean insert them?
To access the elements you can loop through them with
$('#uploadform > ul').each(function(index) {
alert(index + ': ' + $(this).text());
});
Notice your generated HTML. You are creating ul (unordered list) for each li (list item). you may want to fix that to only append list items.

I guess you want to allow user to add many uploads before submit form.
In that case I'm using rails nested attributes.
Here is example. Order has many Photos
Order model:
class Order < ActiveRecord::Base
has_many :photos, :dependent=>:destroy, :inverse_of=>:order
accepts_nested_attributes_for :photos, :allow_destroy=>true,:reject_if=> :all_blank
end
Photo model:
class Photo < ActiveRecord::Base
has_attached_file :photo
belongs_to :order
end
Order form view:
<%= form_for #order, :html => {:autocomplete => :off, :multipart => true} do |f| %>
<%= f.label :title %><br />
<%= f.text_field :title %>
<h3>Order photos</h3>
<%= f.fields_for :photos do |photo| %>
<%= render :partial=>'photo_form', :object=> photo, :as => :f %>
<% end %>
<%= link_to 'Add photo', new_photo_path, :remote=>true, :id=>'add_photo' %>
<%= f.submit%>
<% end %>
photo_form partial:
<fieldset class="photo" data-status="<%= f.object.persisted? ? 'db':'new' %>">
<% if f.object.persisted? %>
<div class="field">
<label>Photo:</label><br />
<%= link_to f.object.photo.url, :target=>'_blank' do %><%= image_tag f.object.photo.url(:mini) %><% end %>
</div>
<% else %>
<%= f.label :photo
<%= f.file_field :photo %>
<%= f.text_field :description %>
<%= f.check_box :_destroy, :class=>'delete' %>
</fieldset>
Now in your controller you need 3 actions to edit order with photos: edit, update, add_photo(ajax action when user click add photo link):
class OrdersController < ApplicationController
def edit
#order = Order.find(params[:id])
end
# Action responsible for updating existing order record
def update
#order = Order.find(params[:id])
if #order.update_attributes(params[:order])
redirect_to #order, :notice=>'Order updated'
else
render :action => "edit" #save error, display order form with errors
end
end
# Action responsible for creating nested form for order photo
def new_photo
#nothing just renders 'new_photo.js.erb'
end
end
new_photo.js.erb:
$object=$("<%= escape_javascript( render(:partial => "photo_form", :locals=>{
:f=>FormBuilder.new("order[photos_attributes][#{rand(400000)}]",Photo.new(),self,{},proc {})
}) ) %>").hide(); //generates new photo view
$object.insertBefore("a#add_photo").slideDown(500);
This is just example, but you shouldn't have problem to adopt this in your application.