We Keep Coding

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.

multipleselect is forgeting selected values after proceed

Multiplyselect is forgetting owners values after searching.
After proceed i got params[:search] and params[:owners] but only input for search is filled-in. This is my code.
def index
#all_owners = Owner.select('distinct name').pluck(:name)
#animal = Animal.search(params[:search])
#animal = #animals.joins(:owners).where("owners.name IN (?) ", params[:owners].present? ? params[:owners] : #owners)
end
#------------------------------------------
<%= form_tag animals_path, :method => 'get' do %>
<%= text_field_tag :search, params[:search]%>
<%= select_tag :owners, options_for_select(#all_owners),id: "multiselect-id", multiple: true %>
<%= submit_tag "Search", :name => nil %>
<% end %>
<% #aminals.each do |animal| %>
<%= animal.name %>
<%= animal.owners.map(&:name).join(', ') %>
<% end %>
<script type="text/javascript">
$(document).ready(function() {
$('#multiselect-id').select2();
});
</script>

You forgot to specify the currently selected values in the select_tag. This is done e.g. by a second argument to the options_for_select helper, i.e. something like: options_for_select(#all_owners, params[:owners] || #owners).
See the docs here.

jQuery ajax call from a numberfield using Rails is not working

For my application, I have fixeddeposits where we can create new fixeddeposits. Now, i want to update the rateofinterest field based upon the number(365/730/1095/1460 & 1825) I typed in the deposit period(number_field) and i have to check the customer age.
I have calculated customer age in fixeddeposits_controller. I don't know where i am wrong that too is not working.
Example 1:
1.1: If a customer age >58 && age<75, i want to open the fixed deposit for 365days means i have to sum the two fields rate(9.5%) + seniorincrement(0.5%) and then pass the value(10.0%) to rateofinterest field.
1.2: If a customer age >75, i want to open the fixed deposit for 365days means i have to sum the two fields rate(9.5%) + superseniorincrement(1.0%) and then pass the value(10.5%) to rateofinterest field.
1.3: If a customer age <58, i want to open the fixed deposit for 365days means i have to pass the rate(9.5%) field value alone to rateofinterest field.
Where as(rate, seniorincrement, superseniorincrement)fields are from interestrates table.
For this i am using AJAX/JQUERY which was suggest by Mandeep in my previous question.
I have implemented, but its not working. I have attached the code i tried. Kindly check it and please give me some ideas.
_form.html.erb
<%= form_for #fixeddeposit do |f| %>
<% if #fixeddeposit.errors.any? %>
<h4>Couldn't open FD Account</h4>
<ul>
<% #fixeddeposit.errors.full_messages.each do |error| %>
<li><%= error %></li>
<% end %>
</ul>
<% end %>
<%= f.label :customer_name, class:'required' %>
<%= f.text_field :customername, :placeholder =>'Name' %>
<%= f.label :date_of_birth, class:'required' %>
<%= f.date_select :dateofbirth, { :include_blank => true, :start_year => 1900, :end_year => 2014 }, :id => "dateofbirth" %>
<%= f.label :Periods, class:'required' %>
<%= f.number_field :periods, :id => "fixeddeposit_periods", :placeholder => "Days", :class => "input-mini" %>
<%= f.label :Rate_Of_Interest %>
<%= f.text_field :rateofinterest, :id => "fixeddeposit_rateofinterest", :value => "", :disabled => true, :class => "input-medium" %>
<span class="help-block">auto-generated</span>
<div>
</div>
<%= f.submit "Open FD", class: "btn btn-primary" %>
<% end %>
</div>
</div>
application.js
$(document).on("change","#fixeddeposit_periods",function(){
var periods = $(this).val();
var dateofbirth = $("#dateofbirth").val();
$.ajax({
type: "POST",
url: "/rateofinterest",
data: { periods: periods, dateofbirth: dateofbirth }
});
});
fixeddeposits_controller
def calculate_age(dateofbirth)
#age = DateTime.now - dateofbirth/ 365
end
def calculate_rateofinterest
#periods = params[:periods]
#dateofbirth = params[:dateofbirth]
calculate_age(#dateofbirth)
if #age >= 58 && #age < 75
#rateofinterest = Rateofinterest.select('interestrates.id, interestrates.seniorincrement')
elsif #age >= 75
#rateofinterest = Rateofinterest.select('interestrates.id, interestrates.superseniorincrement')
else
#rateofinterest = Rateofinterest.select('interestrates.id, interestrates.rate')
end
respond_to do |format|
format.html{ redirect_to fixeddeposits_path }
format.js{}
format.json{}
end
end
calculate_rateofinterest.js.erb
$("#fixeddeposit_rateofinterest").val(#rate);
routes.rb
resources :fixeddeposits do
resources :interestrates
end
post "/rateofinterest" => "fixeddeposits#calculate_rateofinterest" , as: "calculate_rateofinterest"
I don't know why it is not working. Help me to solve this issue.

First of all, in your js code replace
var dateofbirth = $("#fixeddeposit_dateofbirth").val();
with
// you have mentioned your dob field's id as 'dateofbirth'
var dateofbirth = $("#dateofbirth").val();
In your controller, you need to call calculate_age method to have #age variable. Replace
#dateofbirth = params[:dateofbirth]
with
#dateofbirth = params[:dateofbirth]
calculate_age(#dateofbirth)
I'm not sure, why you have written #age.save in your calculate_age method definition. You may remove it.
Now in your calculate_rateofinterest.js.erb file replace
$("#interestrates_rate").val(#rate);
with
$("#fixeddeposit_rateofinterest").val(#rate);
Hope it will help you.

Rails 3 javascript: How to render a partial with parameters

I'm still getting the hang of Rails. Here I'm using Rails 3 and the goal basically is to have an AJAX call triggered when I click the subscribe button the post_form partial is rendered beneath for the topic I have just subscribed to. The button then becomes an unsubscibe button and the post_form partial is removed. The toggling of the button alone works (i.e: by removing the second line in the two immediately following snippets), but the rendering of the *post_form* partial does not.
The problem is I can't seem to get the right syntax and/or passing of parameters in the two following partials. The topic object is just not passed and I get an invalid model_name for NilClass error when clicking on the subscribe or unsubscribe button. If I refresh the page manually, the partial is rendered or hidden the correct way, so it's really just the AJAX part that isn't working right.
views/subscription/create.js.erb
$("#subscription_form").html("<%= escape_javascript(render('users/unsubscribe')) %>");
$("#post_form").html("<%= escape_javascript(render('shared/post_form', :topic => #topic)) %>");
views/subscription/destroy.js.erb
$("#subscription_form").html("<%= escape_javascript(render('users/subscribe')) %>");
$("#post_form").html("<%= escape_javascript(render('shared/post_form', :topic => #topic)) %>");
views/users/_subscription_form.html.erb
<% unless current_user?(#user) %>
<div id="subscription_form">
<% if current_user.subscribed?(#topic) %>
<%= render 'users/unsubscribe', :topic => #topic %>
<% else %>
<%= render 'users/subscribe', :topic => #topic %>
<% end %>
</div>
<% end %>
controllers/subscriptions_controller.rb
class SubscriptionsController < ApplicationController
before_filter :signed_in_user
respond_to :html, :js
def create
#topic = Topic.find(params[:subscription][:topic_id])
current_user.subscribe!(#topic)
respond_with #topic
end
def destroy
#topic = Subscription.find(params[:id]).topic
current_user.unsubscribe!(#topic)
respond_with #topic
end
end
views/shared/_post_form.html.erb
<%= form_for(#post) do |f| %>
<div class="field">
<%= f.hidden_field :topic_id, :value => #topic.id %>
<%= f.text_area :content, placeholder: "Tell us about it ..." %>
</div>
<%= f.submit "Post", class: "btn btn-large btn-primary" %>
<% end %>
If it is of any help, the relationships are:
post -> belongs_to -> topic and topic -> has_many -> posts

Looks like you're using the variable "#post" in the "views/_post_form.html.erb" file.
<%= form_for(#post) do |f| %>
Since you aren't setting that variable anywhere in your actions you would get a null reference error.
You would need to do something like this:
def create
#post = Post.find(the_post_id)
#topic = Topic.find(params[:subscription][:topic_id])
current_user.subscribe!(#topic)
respond_with #topic
end
Also you are passing in the "topic" variable as a local but accessing it as an instance variable. You should change the your _post_form.html.erb file to look like this:
<%= form_for(#post) do |f| %>
<div class="field">
<%= f.hidden_field :topic_id, :value => topic.id %>
<%= f.text_area :content, placeholder: "Tell us about it ..." %>
</div>
<%= f.submit "Post", class: "btn btn-large btn-primary" %>
<% end %>
I don't have my ruby environment readily available so I can't verify that this will solve your problem but I think it should move you in the right direction.

Dynamically Generated Select Menus Not Holding State in Edit View

I'm following Railscast 88 to create a dynamic dependent dropdown menu. http://railscasts.com/episodes/88-dynamic-select-menus
I'm rendering these dropdowns inside a partial that I'm using in a multi-model form. The form I'm using follows the Advanced Rails Recipes process by Ryan Bates. Because I'm rendering the dropdown inside a partial, I had to depart from strictly following the Railscast code. On the Railscast link provided above, comments 30-31 and 60-62 address these issues and provide an approach that I used.
For new records, everything is working great. I select a parent object from the dropdown, and the Javascript dynamically limits the child options to only those items that are associated with the parent I selected. I'm able to save my selections and everything works great.
The problem is that when I go back to the edit page, and I click on the child selection dropdown, the constraints tying it to the parent object are no longer in place. I'm now able to select any child, whether or not it's connected to the parent. This is a major user experience issue because the list of child objects is just too long and complicated. I need the child options to always depend on the parent that is selected.
Here's my code:
Controller#javascripts
def dynamic_varieties
#varieties = Variety.find(:all)
respond_to do |format|
format.js
end
end
Views#javascripts #dynamic_varieties.js.erb
var varieties = new Array();
<% for variety in #varieties -%>
varieties.push(new Array(<%= variety.product_id %>, '<%=h variety.name %>', <%= 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]);
}
});
}
Views#users #edit.html.erb
<% javascript 'dynamic_varieties' %>
<%= render :partial => 'form' %>
View#users #_form.html.erb
<%= add_season_link "+ Add another product" %>
<%= render :partial => 'season', :collection => #user.seasons %>
view#users #_season.html.erb
<div class="season">
<% new_or_existing = season.new_record? ? 'new' : 'existing' %>
<% prefix = "user[#{new_or_existing}_season_attributes][]" %>
<% fields_for prefix, season do |season_form| -%>
<%= error_messages_for :season, :object => season %>
<div class="each">
<p class="drop">
<label for = "user_product_id">Product:</label> <%= season_form.collection_select :product_id, Product.find(:all), :id, :name, {:prompt => "Select Product"}, {:onchange => "collectionSelected(this);"} %>
<label for="user_variety_id">Variety:</label>
<%= season_form.collection_select :variety_id, Variety.find(:all), :id, :name, :prompt => "Select Variety" %>
</p>
<p class="removeMarket">
<%= link_to_function "- Remove Product", "if(confirm('Are you sure you want to delete this product?')) $(this).up('.season').remove()" %>
</p>
</div>
<% end -%>

Here's your culprit:
<%= season_form.collection_select :variety_id, Variety.find(:all),
:id, :name, :prompt => "Select Variety" %>
Works perfectly on a new record because it's showing everything, and gets overwritten when the select changes on the other select box.
You need to do something like 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 => "Select Variety" %>
Which will use only the Varieties linked to season.product. If season.product doesn't exist it lists all of them. It will also automatically select the right one if the existing record had a variety_id.
It also wouldn't hurt to change.
<%= season_form.collection_select :product_id, Product.find(:all),
:id, :name, {:prompt => "Select Product"},
{:onchange => "collectionSelected(this);"} %>
to
<%= season_form.select :product_id,
options_from_collection_for_select(Product.find(:all),
:id, :name, season.product), {:prompt => "Select Product"},
{:onchange => "collectionSelected(this);"} %>
Which will select the proper product on page load. This second part is essentially the Rails way of doing what BYK's first suggestion was. However, given the nature of the onchange method given to the select box, this line on its own would not solve the problem. It would just enhance the user experience by highlighting the product associated with the season.

I think you have two options:
Give one of the products(or simply the first element of the product list) a "selected" attribute which will force the browser to select that one always.
Trigger the "collectionSelected" function on "dom ready" or "window.onload" with giving the product list selectbox as its parameter.
And a note: never, ever trust JavaScript to force the user to send proper data to the server.