We Keep Coding

Does the cocoon gem require n models to be built in the controller new action?

I have installed the cocoon gem in my rails 4 app exactly as described. This works fantastic in the parent model form allowing the user to add/remove fields for the child model(s). Where I'm having trouble is the submission of the child object. If child models are built in the parent model's new action, then I am able to submit exactly however many models were created, no more. This is obvious from the parameters being submitted as they contain child_attributes (or not, if no child models were built in the controller).
Currently running
rails 4.2.10
ruby 2.5.1
cocoon 1.2.14
jquery-rails 4.3.3
jquery-ui-rails 6.0.1
CODE SNIPPETS
class EventsController < ApplicationController
before_action :authenticate_user!, only: [:new, :create]
def new
#event = Event.new
#event.competitions.build
end
def create
#event = current_user.events.create(event_params)
if #event.valid?
flash[:notice] = "Event created"
redirect_to events_path
else
flash[:alert] = "Event not created. Please check for errors in the form and try again."
render :new, status: :unprocessable_entity
end
end
def event_params
params.require(:event).permit(
:event_name,
:event_start,
:event_end,
:event_address,
competitions_attributes: [:id, :competition_name, :maximum_participants, :type_id, :fee, :_destroy]
)
end
end
Parent model
acts_as_paranoid
has_and_belongs_to_many :users
has_many :competitions, dependent: :destroy, inverse_of: :event
belongs_to :address
accepts_nested_attributes_for :address
accepts_nested_attributes_for :competitions, allow_destroy: true
Child model
class Competition < ActiveRecord::Base
acts_as_paranoid
belongs_to :event
has_many :participants, dependent: :destroy
belongs_to :type
accepts_nested_attributes_for :participants, allow_destroy: true
Form (new.html.erb)
<div class="text-left ">
<%= simple_form_for #event do |f| %>
<%= f.input :event_name, input_html: {maxlength: 60} %>
<%= f.input :logo, label: "Event Logo:", hint: 'jpg or png files allowed, max size: 1MB' %>
<a <%= f.input :description, label_html: {class: "glyphicon glyphicon-question-sign event-new", href: "#", 'data-content': "You can format your description using the editor buttons. Cutting and pasting from other text editors will not work unless they are first exported into html format. For security reasons, some html tags are not allowed and will be removed.", rel: "popover", "data-placement": 'top', 'data-original-title': 'WYSIWYG editor help', 'data-trigger': 'hover' }, as: :ckeditor, input_html: { ckeditor: { toolbar: 'mini' } } %></a>
<%= f.input :event_address, placeholder: "Enter Street Address, City, State, Postal Code" %>
<%= f.input :registration_fee, :input_html => { :value => '0.00'}, label: "Team registration fee" %>
<%= f.input :event_start %>
<%= f.input :event_end %>
<br />
<h3>Competitions</h3>
<div id="competitions">
<%= f.simple_fields_for :competitions do |competition| %>
<%= render 'competition_fields', f: competition %>
<% end %>
<div class="links">
<%= link_to_add_association 'add competition', f, :competitions %>
</div>
</div>
<%= f.submit 'Create', :class => 'pull-right btn btn-primary' %>
<% end %>
</div
Partial (named _competition_fields.html.erb
<div class="nested-fields">
<%= f.input :competition_name %>
<%= f.collection_select(:type_id, #types, :id, :name, prompt: "Select a Type") %>
<%= f.input :fee, :input_html => { :value => '0.00'} %>
<%= f.input :maximum_participants %>
<%= link_to_remove_association "Delete Competition", f %>
</div>
application.js
//= require jquery
//= require bootstrap-sprockets
//= require jquery_ujs
//= require dataTables/jquery.dataTables
//= require jquery-ui/widgets/autocomplete
//= require autocomplete-rails
//= require moment
//= require bootstrap-datetimepicker
//= require ckeditor/init
//= require google_analytics
//= require cocoon
//= require_tree .
From the Rails console (after the parent model is inserted)
"competitions_attributes"=>{"0"=>{"competition_name"=>"test1", "type_id"=>"2", "fee"=>"0.00", "maximum_participants"=>"8", "_destroy"=>"false"}}}, "commit"=>"Create"}
SQL (17.4ms) INSERT INTO "competitions" ("competition_name", "maximum_participants", "type_id", "fee", "event_id", "created_at", "updated_at") VALUES ($1, $2, $3, $4, $5, $6, $7) RETURNING "id" [["competition_name", "test1"], ["maximum_participants", 8], ["type_id", 2], ["fee", "0.0"], ["event_id", 305], ["created_at", "2019-08-01 11:13:44.582299"], ["updated_at", "2019-08-01 11:13:44.582299"]]
I've been through all the usual issues with the setup for the gem (accepts_nested_attributes_for, inverse_of, the naming and indentation of the child_fields partial, jQuery is installed and cocoon being called etc.) It's all to spec so far as I can tell. And it works, as long as the child models are built in the new action.

Argh! What a facepalm moment. Turned out the <a> tag on the ckeditor description field caused all this fuss. Removing the <a> tag allowed cocoon to operate normally.
So, in answer to the original question: No, the cocoon gem does -not- require even one child model to be built in the new controller action to add them.

Rails is rendering partial view, when it should only be updating the partial view in an existing page

I'm trying to implement up/down-voting a post through AJAX, so that users don't have to refresh the page to see the updated score. However, when the voting links are clicked, the user is redirected to a page that only displays the partial view. The parent view is not even displayed. How can I update the partial in the index page without refreshing the entire page? I suspect that the problem lies in my 'vote' controller action. Here is my code so far:
/app/controllers/posts_controllers.rb
def vote
value = params[:type] == "up" ? 1 : -1
#post = Post.find(params[:id])
#post.add_or_update_evaluation(:votes, value, current_user)
respond_to do |format|
#I'm guessing the problem lies here.
format.html { render partial: 'score', locals: {post: #post} }
format.js
end
end
/app/views/posts/_score.html.erb
<td id="score_<%= post.id %>"><%= post.reputation_for(:votes).to_i %></td>
<% if user_signed_in? %>
<td>
<%= button_to "Upvote", vote_post_path(post, type: "up"), method: "post", class: "btn btn-success", remote: true %>
</td>
<td>
<%= button_to "Downvote", vote_post_path(post, type: "down"), method: "post", class: "btn btn-danger", remote: true %>
</td>
<% end %>
/app/views/posts/score.js.erb
$('#score_<%= post.id %>').html("<%= escape_javaScript render partial: 'score', locals: {post: #post} %>");
/app/views/posts/index.html.erb
<% #posts.each do |post| %>
<%= render partial: 'score', locals: {post: post} %>
...
<% end %>
/app/assets/javascripts/application.js
//= require jquery
//= require jquery_ujs
//= require bootstrap.min
//= require turbolinks
//= require_tree .

The js branch of your response misses the block that states which view should be rendered:
respond_to do |format|
format.html { render partial: 'score', locals: {post: #post} }
format.js { render partial: 'score', locals: {post: #post} }
end
Otherwise the rails default would be to render vote.js, since this is your controller method name. And maybe it's just a typo but your file should be named _score.js.erb (partial), just like the HTML version.
UPDATE
Having reviewed your code once more, maybe it's enough to simply rename score.js.erb to vote.js.erb, since you render the _score partial in there.
And from a design point of view, the cleanest and driest solution would be to skip the blocks for the format calls and have the files like so:
# posts_controllers.rb
def vote
value = params[:type] == "up" ? 1 : -1
#post = Post.find(params[:id])
#post.add_or_update_evaluation(:votes, value, current_user)
respond_to do |format|
format.html # this renders vote.html.erb
format.js # this renders vote.js.erb
end
end
# vote.html.erb
<%= render 'score', locals: { post: #post } %>
# vote.js.erb
$('#score_<%= #post.id %>').html("<%= escape_javaScript render partial: 'score', locals: { post: #post } %>");
# _score.html.haml
<td id="score_<%= post.id %>"><%= post.reputation_for(:votes).to_i %></td>
<% if user_signed_in? %>
<td>
<%= button_to "Upvote", vote_post_path(post, type: "up"), method: "post", class: "btn btn-success", remote: true %>
</td>
<td>
<%= button_to "Downvote", vote_post_path(post, type: "down"), method: "post", class: "btn btn-danger", remote: true %>
</td>
# index.html.erb
<%= render 'score', collection: #posts, as: :post %>

AJAX Fave Button Not Working Rails

I'm trying to allow users to favorite posts and then it show them sort of of interaction through AJAX, but it's not working.
The error I'm getting in the console is:
ActionView::Template::Error (undefined local variable or method `post_item' for #<#<Class:0x007fecb2a3d5f8>:0x007fecb2a357e0>):
The button is being rendered through a partial:
<%= render "shared/fave_form", post_item: post_item %>
Here's the code for the button (shared/_fave_form.html.erb):
<% if current_user.voted_on?(Post.find(post_item)) %>
<%= link_to "unlike", vote_against_post_path(post_item.id), :remote => true, :method => :post, :class => "btn") %>
<% else %>
<%= link_to "like", vote_up_post_path(post_item.id), :remote => true, :method => :post, :class => "btn") %>
<% end %>
Here's the toggle.js.erb file:
$("#fave").html("<%= escape_javascript render('fave_form') %>");

When you render the partial using toggle.js.erb it is not getting locals value post_item, you have to provide it in also.So, your js code should be something like following
$("#fave").html("<%= escape_javascript(render :partial=>"fave_form", locals: {post_item: post_item}).html_safe %>);
I guess you are using some ajax call and then your toggle.js.erb so in your toggle action you must specify value to post_item, lets make it instance variable #post_item so that we can use it in toggle.js.erb.
$("#fave").html("<%= escape_javascript(render :partial=>"fave_form", locals: {post_item: #post_item}).html_safe %>);

The partial is using a local variable, so pass post_item as a local:
<%= render :partial => "shared/fave_form", :locals => {post_item: post_item} %>

rails: accessing a non-instance variable in js.erb

I have a page that renders multiple forms. Currently, when the user submits any one of these forms, it updates (via ajax) a div on the same page with the content from the form that was just submitted.
I also want to remove() the form element that was just submitted after the ajax post request is completed. However, I need to be able to access that specific form ID within the js.erb file to do so.
Since my page has x number of forms rendered dynamically, I cannot simply access an instance variable in my js.erb.
Page:
<% for peer_review in #peer_reviews %>
<%= render :partial => 'form', :locals => { :peer_review => peer_review } %>
<% end %>
<div id="completed_peer_reviews">
<%= render 'completed_peer_reviews' %>
</div>
The #peer_reviews instance variable contains an array of new PeerReview objects already containing some data.
Form:
<div id="peer_review_form_<%= peer_review.reviewee_id %>">
<%= form_for peer_review, :html => { :method => "post" }, :remote => true do |f| %>
<%= f.error_messages %>
<p>
Peer Review for: <%= User.find(peer_review.reviewee_id).name %><br />
</p>
<p>
<%= f.label :rating %>:
<%= f.select :rating, [1, 2, 3, 4, 5], { :include_blank => 'None' } %>
</p>
<p>
<%= f.label :review %><br />
<%= f.text_area :review %>
</p>
<%= f.hidden_field :user_id, :value => peer_review.user_id %>
<%= f.hidden_field :reviewee_id, :value => peer_review.reviewee_id %>
<%= f.hidden_field :review_period_id, :value => peer_review.review_period_id %>
<p><%= f.submit "Submit" %></p>
<% end %>
</div>
js.erb:
$("#completed_peer_reviews").html("<%= escape_javascript(render('completed_peer_reviews')) %>");
I was hoping to just add another line to the js.erb file that removes the form element that just triggered the execution of the js.erb file like so:
$("#peer_review_form_<%= peer_review.reviewee_id %>").remove();
How should I actually be referencing peer_review.reviewee_id here? Or should I be taking a completely different approach?

This is one of the classic issues of RJS templates.
Quick answer:
If you simply want to solve the problem, you could pass along some temporary id to identify the form. e.g:
# in the index
<% #peer_reviews.each.with_index do |peer_review, i| %>
<%= render :partial => 'form',
:locals => { :peer_review => peer_review, :i => i } %>
<% end %>
# then in the form (note, you don't need to specify POST in a form_for)
<div id="peer_review_form_<%= i %>">
<%= form_for peer_review, :remote => true do |f| %>
<%= hidden_field_tag 'temp_id', i %>
# finally in the create js.erb
$("#peer_review_form_<%= params[:temp_id] %>").remove();
Longer Answer:
That being said, while RJS templates were "the Rails way" for a long time, they've since fallen out of favor.
The more modern method is typically client side JS templates with a JSON API, rather than running server generated JS templates (RJS). This has a lot of advantages, one being that the DOM binding issue you're having right now no longer exists.
This is an example of how you might do this with pure jQuery, but there are many templating options out there.
<script id="peer_review_tmpl" type="text/x-jquery-tmpl">
<div class="completed_peer_review">
<p>${review}</p>
...
</div>
</script>
Then you'd create a handler and bind it to a successful ajax response. This would require that your peer_reviews#create action responded to JSON:
$('form.new_peer_review').bind("ajax:success", function(data) {
// remove the form which triggered the creation
$(this).remove();
// then render the data into a template, and append it to the list
$("#peer_review_tmpl").tmpl(data).appendTo("#completed_peer_reviews");
});

Routing error that appears to have something to do with partials and/or forms

In a Rails 3 application, I have a "table" partial that contains a data entry form table, plus a separate smaller form (mostly hidden fields) below it to clear the table data. I have a third form underneath the partial to add a new column to the table contained in the partial. The page loads fine. The small form to clear the table data works, and refreshes the partial as it is supposed to. BUT, When I submit the add-new-column form, I get this routing error:
ActionView::Template::Error (No route matches {:controller=>"outcome_results", :action=>"clear_table"}):
70: </table>
71: <%= submit_tag "Save" %>
72: <% end %>
73: <%= form_tag url_for(:controller => 'outcome_results', :action => 'clear_table'), :id => "clear_data_table_link", :remote => true do %>
74: <%= hidden_field_tag "subgroup_id", subgroup_id %>
75: <%= hidden_field_tag "outcome_id", #selected_outcome_object.id %>
76: <%= hidden_field_tag "timepoint_id", timepoint_id %>
app/views/outcome_results/_table.html.erb:73:in `_app_views_outcome_results__table_html_erb__204353865_18893424_435027370'
app/controllers/outcome_columns_controller.rb:36:in `block (3 levels) in create'
app/controllers/outcome_columns_controller.rb:35:in `block (2 levels) in create'
app/controllers/outcome_columns_controller.rb:33:in `create'
Line 72 is the end tag of the first (table/data entry) form.
Line 73 is the form tag for my clear-table-data form which works fine on its own - no routing errors there.
My routes.rb is crazy long but contains this line:
match 'projects/:project_id/studies/:study_id/clear_table' => 'outcome_results#clear_table'
The add-new-column form looks like this:
<div id="outcome_column_validation_message"></div>
<%= form_for #outcome_column, :action => :create, :remote => true, :id=>"outcome_columns_form" do |f| %>
<%= hidden_field_tag "outcome_id", !#selected_outcome_object.nil? ? #selected_outcome_object.id : nil %>
<%= hidden_field_tag "subgroup_id", !#selected_timepoint.nil? ? #selected_timepoint : 0 %>
<%= hidden_field_tag "timepoint_id", !#selected_subgroup.nil? ? #selected_subgroup : 0 %>
<div class="field">
Custom Column Title: <%= f.text_field :name %> Description: <%= f.text_field :description %> <%= f.submit "Add Custom Column" %>
<% end %>
and the format section of the "create" action in the "outcome_column" controller looks like this:
respond_to do |format|
format.js {
render :update do |page|
page.replace_html 'outcome_results_table', :partial => 'outcome_results/table'
page['outcome_columns_form'].reset
page.replace_html 'outcome_column_validation_message', ""
end
}
end
I can post more code if it would help... anyone have any ideas about this routing error?
Thanks in advance.

The route would take two arguments: a project_id and a study_id. This is not matching the route because you have not passed through these two parameters to the url_for in your form_tag.