We Keep Coding

Callbacks of cocoon gem in form construction action view update

When creating a form using a cocoon gem, when inserting a new cocoon, I can detect an action by calling the "cocoon: after insert" callback.
And I use this to replace the element of my id to make use of another javascript function to calculate the percentage in the other field, entered by the user.
But when I reopen the form using the update action, the cocoons are redefined. And this does not cause the callback "cocoon: after insert". to reset the id's, how it works when inserting one by one
I wanted to know if there is a way to capture the callbacks when returning the form for editing. So I can detect this and redraw the new ID again
I use this code in "form.html.erb" to replace the id when it creates new instances of the cocoon
var i = 0;
$(document).on('cocoon:after-insert', function (e) {
i++;
var id_drop_down_product = 'id_drop_down_product' + i;
$(this).find("#id_drop_down_product").attr('id', id_drop_down_product);
});
I thought it would work, in building the form for editing
Here is my code that calls the cocoons, where everything is working too
<div class="form-group">
<%= form.fields_for :pedido_produtos do |builder| %>
<% render partial: "shared/pedido_produto_fields", locals: {f: builder} %>
<% end %>
<%= link_to_add_association('Produto', form, :pedido_produtos, class: "btn btn-outline-success") %>
</div>
<div class="nested-fields">
<div class="order_product">
<div class="form-group col-md-12">
<%= f.collection_select(:product_id, Product.all, :id, :nome, {:prompt => "Selecione um Product"}, {:class => 'form-control', onchange: "searchProduct($(this).val(),this.id);", id: "dropselectProduct", :required => true}) %>
<%= f.text_field :quantity, class: "form-control", id: "quantityproducty", :required => true, onchange: "update_discount($(this).val(),this.id);" %>
<%= f.text_field(:porcent, class: "form-control", id: "porcent", readonly: true) %>
</div>
<%= link_to_remove_association('Del.', f, class: "btn btn-outline-danger") %>
</div>
</div>
in the view, I have a field, to get the value of the product and the value of the percentage field, (which was selected by the user) and calculate the percentage of the new value of the product.
but in this view, you can insert multiple products, and perform this action.
Picture view example:
https://ibb.co/s3Z43yk

How can I retrieve the ID of a collection_select and display a list of items every time the select changes?

I have a form
_form.html.erb
<%= simple_form_for(#exam) do |f| %>
<%= f.error_notification %>
<div class="field">
<%= f.label :Year %>
<%= f.collection_select :year_id, Year.order(:name), :id, :name, prompt: true %>
</div>
<div class="form-inputs">
<%= f.input :marks_secured %>
</div>
<div class="form-actions">
<%= f.button :submit, "Submit" %>
</div>
<% end %>
And, every time the select box changes (i.e. a different year is selected), I want to display the list of students for the selected year. The list must be shown within the same page.
I don't know how to grab the ID of the selected item and use it back inside the view/controller in order to achieve this..
Here are my models:
student.rb
class Student < ApplicationRecord
belongs_to :year
has_many :exams
end
exam.rb
class Exam < ApplicationRecord
belongs_to :year
belongs_to :student
end
year.rb
class Year < ApplicationRecord
has_many :students
has_many :exams
end

I recommend using ajax in order to show the list of students every time the select option is changed; to do so you need to make several changes.
First, you need to determine where in your view you would like to display de students, for example, try adding a div in your form:
<%= simple_form_for(#exam) do |f| %>
<%= f.error_notification %>
<div class="field">
<%= f.label :Year %>
<%= f.collection_select :year_id, Year.order(:name), :id, :name, prompt: true %>
</div>
<div id="students"><!-- Students will be listed here --></div>
<div class="form-inputs">
<%= f.input :marks_secured %>
</div>
<div class="form-actions">
<%= f.button :submit, "Submit" %>
</div>
<% end %>
Next, add a script (on the same view where your form is) to detect when the select changes, and update (via ajax) the students list:
<script type="text/javascript">
$(function () {
function getStudents() {
var year = $('#exam_year_id').val();
$.ajax({
headers: {
'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')
},
type: "GET",
url: "<%= students_url %>",
data: { year: year },
success: function(response) {
$('#students').html(html);
}
});
}
$('#exam_year_id').on('change', getStudents );
getStudents();
});
</script>
In this example the function getStudents is called whenever the select changes ($('#exam_year_id').on('change', getStudents );) and after the page loads (getStudents();), so the students from the default year selected (that is, when your page first loads) get listed.
Also notice that we are replacing the content of the div recently added with a variable called html which will be delivered within a view by your students controller (next step).
Now you need to update your students controller to get the list of students for the selected year:
def index
#Students = Student.where(year: params[:year])
end
And create your view with the list of students:
var html = "<select name='exam[student_id]' id='exam_student_id'>";
<% #Students.each do |student| %>
html = html + "<option value='<%= student.id %>'><%= student.name %></option>"
<% end %>
html = html + "</select>";
The view must be named index.js.erb (instead of a index.html.erb) and will contain javascript; in this example it only contains a the variable (html) with the list of students (the list is created as another select box but you can change it).
Finally, in your exams controller add an update action that will update the exam's details:
def update
exam = Exam.find(params[:id])
exam.student_id = exam_params[:student_id]
exam.year_id = exam_params[:year_id]
exam.save!
end
private
def exam_params
params.require(:exam).permit(:year_id, :student_id)
end
And that's it! Hope this helps.

select user and then dropdown of his challenges

A user has_many challenges.
When a user is selected...
<%= f.select :user_id, options_for_select(#challengers.collect { |challenger| [challenger.full_name] }) %>
... how can we show another dropdown with a list of his challenges?
<%= f.select :challenge_id, options_for_select(#challenger_challenges.collect { |challenged| [challenged.full_challenge]}) %>
In other words, how can we make "#challenger_challenges = the selected user's challenges"?
As it stand I get an error undefined method 'collect' for nil:NilClass since #challenger_challenges is nil.
OPTION 1
In challenges_controller I could do this:
#challengers = User.all
#challenger = User.find(params[:challenger_selected]) if (params[:challenger_selected]).present?
#challenger_challenges = #challenger.challenges
And then I would just need a way to refresh the page once a user is selected so that the user ID is passed in the params as :challenger_selected
OPTION 2
Achieve the aim of this question without the need of a page refresh. *Preferable
UPDATE
Based upon the comments below I realize I need to elaborate.
A user has_many challenges.
A user can create a duel.
In a duel there are two duelers.
The creator of the duel selects his own :challenge_id and then he selects the other dueler as well as one of his :challenge_id and then sets the #duel.consequence the dueler will have to do if he fails his challenge. The other dueler will get a duel request notification and then has the choice to accept or decline the conditions of the duel.
challenges.show.html.erb
<%= render 'duels/form' %>
duels/_form.html.erb
<%= simple_form_for(#duel) do |f| %>
<%= f.fields_for :duelers do |dueler| %>
<%= f.hidden_field :challenge_id, :value => #challenge.id %>
<%= #challenge.full_challenge %>
<% end %>
<%= f.fields_for :duelers do |dueler| %>
<%= render 'duels/dueler_fields', :f => dueler %>
<% end %>
<%= button_tag(type: 'submit', class: "btn", id: "challenge-create-save") do %>
Request Duel
<% end %>
<% end %>
duels/_dueler_fields.html.erb
<%= f.select :user_id, options_for_select(#challengers.collect { |challenger| [challenger.id] }) %>
# Trying to make this responsive to the user that is selected above
<%= render 'challenges/select', :f => f %>
<script>
$('#duel_duelers_attributes_1_user_id').change(function () {
var challenger_id = $(this).find(":selected").val();
var address = "<%= select_path %>".concat(challenger_id);
$.get(address, function(data) {
$("#duel_duelers_attributes_1_challenge_id").html(data);
});
});
</script>
routes
get 'challenges/select/:id' => 'challenges#select', as: 'select'
challenges/_select.html.erb
<%= f.select :challenge_id, options_for_select(#challenger_challenges.collect { |challenged| [challenged.full_challenge]}) %>
challenges_controller
def select
if (params[:challenger_id]).present?
#challenger = User.find(params[:challenger_id])
else
#challenger = User.find(1)
end
#challenger_challenges = #challenger.challenges
end

Credit for this should go to #Fallenhero - I am just explaining it in more detail.
You need to be able to identify the select tag.
<%= f.select ..., :html => {:id => :first} %>
You also need somewhere to put the second one.
<div id="second"></div>
Using jQuery:
$('#first').change(function () {
var challenger_id = $(this).find(":selected").val();
var address = "<%= [prints address to new select tag] %>".concat(challenger_id);
$.get(address, function(data) {
$("#second").html(data);
});
});
The address Ruby prints out should look something like challenges/select/ depending on how you want to design it. The / at the end is important.

If you can't nest HTML forms, how can you submit multiple selections?

So for example, I have a table with a checkbox for each row. Now, I added in the functionality to be able to delete multiple selected rows by using built in rails form helper. The problem is, I also need to be able to 'disable selected' and 'enable selected' rows as well.
<%= form_tag sccm_destroy_multiple_url , method: :delete do %>
.... some table rows and data
<%= check_box_tag "ID[]", group.id %>
... some more rows
<%= button_tag "Delete Selected", type: 'button submit', class: "btn btn-danger",data: {confirm: "Are you sure you want to delete these groups?"} do %>
<i class="fa fa-trash-o"></i> Delete Selected
<%end%>
<%end%>
Now I need to put another button to "Disable Selected" but I can't do this since it would be nesting forms and forms are the only way to store multiple checkbox IDs that I'm aware of...any ideas?

Basically rails gets around this limitation in HTML by creating arrays and nested hashes from the name attributes:
<input type="text" name="dogs[0][breed]" value="Husky">
<input type="text" name="dogs[1][breed]" value="Shiba Inu">
rails will interpret these params as:
"dogs" => {
"0" => {
"breed" => "Husky"
},
"1" => {
"breed" => "Shiba Inu"
},
}
You would normally use fields_for which gives you a special "scoped" form builder instance:
<%= forms_for(#adaption_agency) do |k| %>
<%= f.fields_for(:dogs) do |doggy_fields| %>
<%= doggy_fields.text_field :breed %>
<% end %>
<% end %>
In your case what you could create an update_multiple route and use fields_for with an array of records.
But I would consider using ajax instead to allow the user to manipulate several records on the same page with just the standard CRUD actions. It is a lot less complex than trying to mosh everything into mega actions.
<%= dogs.each do |doggy| %>
<%= form_for(doggy), class: 'doggy-form' do |f| %>
<%= f.text_input :breed %>
<% end %>
<%= button_to('Delete', dog_path(doggy), method: :delete, class: 'doggy-form') %>
<% end %>
Note that this creates forms for each type of action.

Escape_javascript problem

I have a set of dependent dropdown menus on my user/edit page. The user selects the parent dropdown, which then limits the selections available in the child dropdown. The user can add multiple additional sets of parent/child dropdowns. Product is the parent. Variety is the child.
This all works great unless a variety is entered into the database that includes double quotes. When that happens, it breaks the javascript and the trigger to render the partial doesn't work at all.
Single quotes do not cause this problem, nor do any other characters that I've tried. So this problem is specific to double quotes. I thought that escape_javascript was the answer here, but I've tried placing it in many different places in the code and nothing has worked. It's very possible that I just don't know exactly where the helper and it's parenthesis are supposed to go.
The api documentation is terrible. It says escape_javascript(). That's not helpful for me. Similarly, there isn't much clear guidance online. I've searched for hours.
Here are the relevant parts of my code:
Users#edit.html.erb
<%= render :partial => 'season', :collection => #user.seasons %>
Users#_season.html.erb
<% fields_for prefix, season do |season_form| -%>
<%= error_messages_for :season, :object => season %>
Product: <%= season_form.collection_select :product_id, Product.find(:all, :order =>'name'), :id, :name, {:prompt => "Select Product"}, {:onchange => "collectionSelected(this);"} %>
<% varieties = season.product ? season.product.varieties : Variety.all %>
<%= season_form.select :variety_id, options_from_collection_for_select(varieties, :id, :name, season.variety_id), :prompt => "This is optional" %>
Javascripts#dynamic_varieties.js.erb
var varieties = new Array();
<% for variety in #varieties -%>
varieties.push (new Array (<%=h variety.product_id %>, "<%=h variety.name %>", <%=h variety.id %>));
<% end -%>
function collectionSelected(e) {
product_id = e.getValue();
options = e.next(1).options;
options.length = 1;
varieties.each(function(variety) {
if (variety[0] == product_id) {
options[options.length] = new Option(variety[1], variety[2]);
}
});
}

Assuming you're just doing some escaping wrong (and that rails does it correctly), you could try something like:
var varieties = <%= #varieties.map { |v| [v.product_id, h(v.name), v.id] }.to_json %>