We Keep Coding

Make form field required if other form field is set

I am trying to have the POC field be a required field if the location is set to Deployed, but not if it is set to Local. I tried this below:
<%= form_with(model: hardware, local: true, multipart: true) do |form| %>
<% if hardware.errors.any? %>
<div id="error_explanation">
<h2><%= pluralize(hardware.errors.count, "error") %> prohibited this hardware from being saved:</h2>
<ul>
<% hardware.errors.full_messages.each do |message| %>
<li><%= message %></li>
<% end %>
</ul>
</div>
<% end %>
<div class="field">
<%= form.label "Location" %>
<%= form.select :location, ['Local', 'Deployed'] %>
</div>
<div class="field">
<%= form.label "POC" %>
<% if (:location == 'Deployed')%>
<%= form.collection_select(:poc_id, Poc.all, :id, :name, { :prompt => 'Select a POC', :selected => #hardware.poc_id, include_blank: true }, { class: 'form-control', required: true }) %>
<% else %>
<%= form.collection_select(:poc_id, Poc.all, :id, :name, { :prompt => 'Select a POC', :selected => #hardware.poc_id, include_blank: true }, { class: 'form-control' }) %>
<% end %>
</div>
When I run it like this, it does not give any errors, but does not require the field. The only difference between the two collection selects is at the end where I set the required: true flag for the if statement and have it off on the else statement.
Is there a way to do this with the method I am trying? Are there any Ruby Form Helpers that will allow the feature? Do I need to use Javascript to implement this feature?

Rails 3 Nested Model Form with Javascript

I have created a nested model form for Lessons to Questions and Answers. It was not picking up the coffee script so I have add it the coffee code as Javascript but i am get an error and Add Question is not working. Anyone and assist please.
Lesson.rb
has_many :questions
accepts_nested_attributes_for :questions, :allow_destroy => true
Question.rb
belongs_to :lesson
has_many :answers
accepts_nested_attributes_for :answers, :allow_destroy => true
Answer.rb
belongs_to :question
application_helper.rb
def link_to_add_fields(name, f, association) new_object = f.object.send(association).klass.new
id = new_object.object_id
fields = f.fields_for(association, new_object, :child_index => id) do |builder|
render(association.to_s.singularize + "_fields", :f => builder)
end
link_to(name, '#', :class => "add_fields", :data => {:id => id, :fields => fields.gsub("\n", "")}) end
admin/lessons/_form.html.erb
<%= form_for([:admin,#lesson]) do |f| %>
<% if #lesson.errors.any? %>
<div class="notification error png_bg">
<img src="/assets/admin/icons/cross_grey_small.png" title="Close this notification" alt="close" />
<div>
<h2><%= pluralize(#lesson.errors.count, "error") %></h2>
<ul>
<% #lesson.errors.full_messages.each do |msg| %>
<li><%= msg %></li>
<% end %>
</ul>
</div>
</div>
<% end %>
<label class="formlabel">Lesson Title</label>
<%= f.text_field :title %>
<%= f.fields_for :questions do |builder| %>
<%= render 'question_fields', :f => builder %>
<% end %>
<%= link_to_add_fields "Add Question", f, :questions %>
<%= f.submit 'Save', :class => 'button' %>
_question_fields.html.erb
<fieldset>
<%= f.label :content, "Question" %><br />
<%= f.text_area :content %><br />
<%= f.check_box :_destroy %>
<%= f.label :_destroy, "Remove Question" %>
<%= f.fields_for :answers do |builder| %>
<%= render 'answer_fields', :f => builder %>
<% end %>
<%= link_to_add_fields "Add Answer", f, :answers %>
</fieldset>
_answer_fields.html.erb
<fieldset>
<%= f.label :content, "Answer" %>
<%= f.text_field :content %>
<%= f.check_box :_destroy %>
<%= f.label :_destroy, "Remove Answer" %>
</fieldset>
Here is the javascript I have added just before the end of the the head tag. I am getting an error of "$('form').on is not a function. (In '$('form').on', '$('form'....
<script>
jQuery(function() {
$('form').on('click', '.remove_fields', function(event) {
$(this).prev('input[type=hidden]').val('1');
$(this).closest('fieldset').hide();
return event.preventDefault();
});
return $('form').on('click', '.add_fields', function(event) {
var regexp, time;
time = new Date().getTime();
regexp = new RegExp($(this).data('id'), 'g');
$(this).before($(this).data('fields').replace(regexp, time));
return event.preventDefault();
});
});
</script>

Jquery .on() function needs at least jquery 1.7 to work. Update your jquery or use .bind() in place of .on().

How do I implement a basic character counter in a simple_form?

I am using simple_form for my form, and would love to enable some basic JS character count on a text field.
My form partial looks like this:
<%= simple_form_for(#post, html: {class: 'form-horizontal' }) do |f| %>
<%= f.error_notification %>
<%= f.input_field :parent_id, as: :hidden %>
<div class="field">
<% if can? :manage, #post %>
<%= f.input_field :status, label: "Status", collection: Post.statuses.keys, selected: :unconfirmed %>
<% end %>
</div>
<%= f.input :title, placeholder: "Enter Title" %>
<%= f.input :photo %>
<%= f.input :file %>
<%= f.input :body %>
<div class="report-submit">
<%= f.button :submit %>
</div>
<% end %>
How do I go about doing this?

Assign an id to the text field, then add a span beside it where you will show the counter, assign an id to the span as well.
<%= f.input :body, id: "body-field" %>
<span id="body-count">0 characters</span>
In Javascript add this code
$("#body-field").on("keyup", function(){
length = $(this).val().length;
$("#body-count").html(length);
});
I have created a fiddle to show how it works, click here http://jsfiddle.net/L99c30qh/

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);
}

Fetching database records based on user selection in rails

I have a "room type" table full of values, I want to make it so that when a user selects a room type from the collection_select the rest of the form gets updated with that room type's values, I can detect when the selection is changed with javascript through $('#room_roomtype_id').change and which room type was selected through $('#room_roomtype_id :selected').text() but I have no idea, and my hours of searching have been futile, how to then update the other form fields with data from the room type table.
Here is my form code:
<%= form_for #room do |f| %>
<% if #room.errors.any? %>
<div class="error_messages">
<h2>Form is invalid</h2>
<ul>
<% for message in #room.errors.full_messages %>
<li><%= message %></li>
<% end %>
</ul>
</div>
<% end %>
<p id="roomtypes", data-url="<%= url_for :controller => 'rooms', :action => 'roomtypeupdate' %>">
<%= f.label :roomtype_id, "Room type" %><br />
<%= f.collection_select :roomtype_id, Roomtype.order(:name), :id, :name, include_blank: true %>
</p>
<p>
<%= f.label :number, "Room number" %><br />
<%= f.text_field :number %>
</p>
<p>
<%= f.label :maxcap, "Capacity" %><br />
<%= f.number_field :maxcap %>
</p>
<p>
<%= f.label :size, "Size" %><br />
<%= f.number_field :size %>
</p>
<p>
<%= f.label :description, "Description" %><br />
<%= f.text_area :description %>
</p>
<p>
<%= f.label :singlebeds, "Number of single beds" %><br />
<%= f.number_field :singlebeds %>
</p>
<p>
<%= f.label :bathrooms, "Number of bathrooms" %><br />
<%= f.number_field :bathrooms %>
</p>
<br />
<p class="button"><%= f.submit %></p>
<% end %>

Something like this should work:
$('#room_roomtype_id').on('change', function () {
// URL for the sake of example - yours will differ
$.get('/rooms/' + this.value + '.json', function (response) {
// dummy response for the sake of example
response = {
"number": "5A",
"maxcap": "10"
};
$.each(response, function (key, value) {
$('[name="room[' + key + ']"]').val(value);
});
});