Rails form_for html being set to display: none - ruby-on-rails

I have a standard rails form_for tag for creating and editing a new hotel. This renders just fine when visited via the edit_hotels_path, however when visting the new_hotels_path the html form tag is being set to display: none; causing the form to not show only in the "new" view.
I have restarted the server, emptied the cache, made sure they are using the same CSS but it still renders with display set to none.
Here are the styles as seen using developer tools
<form accept-charset="UTF-8" action="/hotels" class="new_hotel" id="new_hotel" method="post" style="display: none; "><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓"><input name="authenticity_token" type="hidden" value="pDlR3gV2tm+Z7xRFdC0uclNY13FlzxUSOjOrHs2ttO0="></div>
element.style {
display: none;
}
below is the html source being rendered, which doesn't include display: none;
<form accept-charset="UTF-8" action="/hotels" class="new_hotel" id="new_hotel" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓" /><input name="authenticity_token" type="hidden" value="pDlR3gV2tm+Z7xRFdC0uclNY13FlzxUSOjOrHs2ttO0=" /></div>
<div class="control-group">
<div class="controls">
<input id="hotel_name" name="hotel[name]" placeholder="Name..." size="30" type="text" /><br>
<select id="hotel_year" name="hotel[year]"><option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option></select><br>
<select id="hotel_month" name="hotel[month]"><option value="January">January</option>
<option value="February">February</option>
<option value="March">March</option>
<option value="April">April</option>
<option value="May">May</option>
<option value="June">June</option>
<option value="July">July</option>
<option value="August">August</option>
<option value="September">September</option>
<option value="October">October</option>
<option value="November">November</option>
<option value="December">December</option></select><br>
<textarea cols="40" id="hotel_body" name="hotel[body]" placeholder="Hotel info up to 1000 words..." rows="20">
</textarea><br>
<input id="hotel_meta_tags" name="hotel[meta_tags]" placeholder="Enter meta tags for image, as a comma separated list..." size="30" type="text" /><br>
<legend>Winner</legend>
<input name="hotel[winner]" type="hidden" value="0" /><input id="hotel_winner" name="hotel[winner]" type="checkbox" value="1" />
<br/>
</div>
<div class="form-actions">
<input class="btn-large btn-success" name="commit" type="submit" value="create" />
</div>
</div>
</form>
below is the code, would appreciated any help.
_form.html.erb
<%= form_for #hotel do |f| %>
<% if #hotel.errors.any? %>
<div id="error_explanation">
<h2><%= pluralize(#hotel.errors.count, "error") %> prohibited this article from being saved:</h2>
<ul>
<% #hotel.errors.full_messages.each do |msg| %>
<li><%= msg %></li>
<% end %>
</ul>
</div>
<% end %>
<%= render partial: "shared/code_sheet" %>
<div class="control-group">
<div class="controls">
<%= f.text_field :name, placeholder: "Name..." %><br>
<%= f.select :year, [2012, 2013, 2014, 2015] %><br>
<%= f.select :month, ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"] %><br>
<%= f.text_area :body, placeholder: "Hotel info up to 1000 words..." %><br>
<%= f.text_field :meta_tags, placeholder: "Enter meta tags for image, as a comma separated list..." %><br>
<legend>Winner</legend>
<%= f.check_box :winner %>
<br/>
</div>
<div class="form-actions">
<%= f.submit "create", class: "btn-large btn-success" %>
</div>
</div>
<% end %>
edit.html.erb
<div class="container">
<h1>Editing hotel</h1>
<%= render "form" %>
<%= link_to 'hotels index', hotels_path %>
</div>
new.html.erb
<div class="container">
<h1>New hotel</h1>
<%= render "form" %>
<%= link_to 'hotels index', hotels_path %>
</div>

It could be anything. You must know what is in your CSS. Did you search for 'display: none;' in your CSS files and checked the matches? element.style is usually set directly on the HTML tag. Search the view also place debugging string to make sure it is pulling the appropriate .html.

Related

Rails 5 partial form not showing in production but is in development

Here's the relevant code. This all works on my development server with a direct code copy to the production server. Development works fine. I don't do much with html or css so it could be there. Anyone see something obvious? I've checked suggestions from other similar questions in the forums but I'm not seeing it.
Code from exams controller:
def new
#exam = Exam.new
#exam.questions.build if #exam.questions.blank?
end
# GET /exams/1/edit
def edit
end
# POST /exams
# POST /exams.json
def create
#exam = Exam.new(exam_params)
respond_to do |format|
if #exam.save
format.html { redirect_to #exam, notice: 'Exam was successfully created.' }
format.json { render :show, status: :created, location: #exam }
else
format.html { render :new }
format.json { render json: #exam.errors, status: :unprocessable_entity }
end
end
end
_form
<%= form_for(#exam) do |f| %>
<% if #exam.errors.any? %>
<div id="error_explanation">
<h2><%= pluralize(exam.errors.count, "error") %> prohibited this exam from being saved:</h2>
<ul>
<% #exam.errors.full_messages.each do |message| %>
<li><%= message %></li>
<% end %>
</ul>
</div>
<% end %>
<div class="field">
<%= f.label :title %>:
<%= f.text_field :title,:size =>"50" %>
</div>
<div class="field">
<%= f.check_box :pcredit %>
<%= f.label :pcredit, "Give partial credit when a question has multiple correct answers." %>
</div>
<div class="field">
<%= f.check_box :available %>
<%= f.label :available, "Available to take" %>
</div>
<% exam.user_id = current_user.id %>
<div class="field">
<%= f.hidden_field :user_id, value: current_user.id %>
</div>
<div class="field">
<%= f.hidden_field :department_id, value: current_user.department_id %>
</div>
<div class="field">
<%= f.hidden_field :creator_id, value: current_user.id %>
</div>
<div class="field">
<%= f.check_box :retake %>
<%= f.label :retake, "Retakes allowed" %>
</div>
<div class="field">
<%= f.check_box :results %>
<%= f.label :results, "Show results" %>
</div>
<hr>
<div id="questions">
<%= f.fields_for :questions do |question| %>
<%= render 'question_fields', f: question %>
<hr>
<% end %>
<%= link_to_add_association 'add_question', f, :questions, partial: 'question_fields' %>
</div>
<div class="actions">
<%= f.submit %>
</div>
<% end %>
Questions Partial
<strong>Question:</strong>
<div class='nested-fields'>
<div class="field">
<%= f.label :name, "Question:" %>
<%= f.text_area :name,:size =>"50" %>
</div>
<div class="field">
<%= f.label :value, "Point Value:" %>
<%= f.number_field :value %>
</div>
<div class="field">
<%= f.label :available %>
<%= f.check_box :available %>
</div>
<%= link_to_remove_association "remove question", f %>
<div>
<p><strong>Answers:</strong></p>
<div id="answers">
<%= f.fields_for :answers do |answer| %>
<%= render 'answer_fields', f: answer %>
<% end %>
</div>
<%= link_to_add_association 'add_answer', f, :answers, partial: 'answer_fields' %>
<hr>
</div>
</div>
Answers Partial
<div class="field">
<%= f.label :name, "Answer:" %>
<%= f.text_area :name,:size =>"50" %>
</div>
<div class="field">
<%= f.label :correct %>
<%= f.check_box :correct %>
</div>
<div class="field">
<%= f.hidden_field :creator_id, value: current_user.id %>
</div>
<div class="field">
<%= f.hidden_field :department_id, value: current_user.department_id %>
</div>
<div class="field">
<%= f.label :locked %>
<%= f.check_box :locked %><br>
<%= link_to_remove_association "remove answer", f %>
</div>
Page Source:
<!DOCTYPE html>
<html>
<head>
<title>Online Placements</title>
<link rel="stylesheet" media="all" href="/assets/exams-72737ac2bb269793edd945e3daa76d03d1bc74588f32b4acceb48ba3328ddc14.css" />
<script src="/assets/application-3199215ebdb5afca46347c9bb159d59b78620065cea4336725d6fdeebc9e0e12.js"></script>
<meta name="csrf-param" content="authenticity_token" />
<meta name="csrf-token" content="+r+/jvc85b8QgSkJrpoT/idGMB3vYnkfLePBCjnWdsGBP1xhb/L86UA80toVa+/SXxGzb1KhDR0mm8hLkGt+Fw==" />
</head>
<body id="exams">
<div id="banner">
<img src=/assets/KHSlogo-3f9139495681edc2572d84a2d1157e33990d56e4536f98c1addaf5e9c092b2fc.gif width="160" height="77" alt="*****" />
<title1>**************</title1>
<p id="notice"></p>
</div>
<div id="columns">
<div id="side">
<font color="#ff0000">Home</font><br>
Placements
<br>
<hr>
<font color="#ff0000">Admins Only</font><br>
Users
<br>
<hr>
<font color="#ff0000">Documentation</font>
<br><a target="_blank" href="https://docs.google.com/document/d/11_WLL7wZIkzssubus4XAQcouKkpRdrG6Lu-dWGn7gJY/edit#bookmark=id.8glqcm3gxwmz">User Document</a>
<br><a target="_blank" href="https://docs.google.com/document/d/11_WLL7wZIkzssubus4XAQcouKkpRdrG6Lu-dWGn7gJY/edit#bookmark=id.o7htlx2i1tyx">Placement Help</a>
</div>
<div id="main">
<li>
Logged in as <b>****- </b>
<a rel="nofollow" data-method="delete" href="/users/sign_out">Logout</a>
</li>
<h1>Editing Exam: Placement Test</h1>
<form class="edit_exam" id="edit_exam_1" action="/exams/1" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="✓" /><input type="hidden" name="_method" value="patch" /><input type="hidden" name="authenticity_token" value="K98vKBkYaUZL5WOt5xjlopkOVk7pvhc3HgBp5M0zmsQu3Hy2oBN5AzZjI3gTYcghP9qhXrpqAQenrZnYcVNw5Q==" />
<div class="field">
<label for="exam_title">Title</label>:
<input size="50" type="text" value="Placement Test" name="exam[title]" id="exam_title" />
</div>
<div class="field">
<input name="exam[pcredit]" type="hidden" value="0" /><input type="checkbox" value="1" checked="checked" name="exam[pcredit]" id="exam_pcredit" />
<label for="exam_pcredit">Give partial credit when a question has multiple correct answers.</label>
</div>
<div class="field">
<input name="exam[available]" type="hidden" value="0" /><input type="checkbox" value="1" checked="checked" name="exam[available]" id="exam_available" />
<label for="exam_available">Available to take</label>
</div>
<div class="field">
<input value="1" type="hidden" name="exam[user_id]" id="exam_user_id" />
</div>
<div class="field">
<input value="1" type="hidden" name="exam[department_id]" id="exam_department_id" />
</div>
<div class="field">
<input value="1" type="hidden" name="exam[creator_id]" id="exam_creator_id" />
</div>
<div class="field">
<input name="exam[retake]" type="hidden" value="0" /><input type="checkbox" value="1" checked="checked" name="exam[retake]" id="exam_retake" />
<label for="exam_retake">Retakes allowed</label>
</div>
<div class="field">
<input name="exam[results]" type="hidden" value="0" /><input type="checkbox" value="1" checked="checked" name="exam[results]" id="exam_results" />
<label for="exam_results">Show results</label>
</div>
<hr>
<div id="questions">
<a class="add_fields" data-association="question" data-associations="questions" data-association-insertion-template="<strong>Question:</strong>
<div class='nested-fields'>
<div class="field">
<label for="exam_questions_attributes_new_questions_name">Question:</label>
<textarea name="exam[questions_attributes][new_questions][name]" id="exam_questions_attributes_new_questions_name" cols="50">
</textarea>
</div>
<div class="field">
<label for="exam_questions_attributes_new_questions_value">Point Value:</label>
<input type="number" name="exam[questions_attributes][new_questions][value]" id="exam_questions_attributes_new_questions_value" />
</div>
<div class="field">
<label for="exam_questions_attributes_new_questions_available">Available</label>
<input name="exam[questions_attributes][new_questions][available]" type="hidden" value="0" /><input type="checkbox" value="1" name="exam[questions_attributes][new_questions][available]" id="exam_questions_attributes_new_questions_available" />
</div>
<input type="hidden" name="exam[questions_attributes][new_questions][_destroy]" id="exam_questions_attributes_new_questions__destroy" value="false" /><a class="remove_fields dynamic" href="#">remove question</a>
<div>
<p><strong>Answers:</strong></p>
<div id="answers">
</div>
<a class="add_fields" data-association="answer" data-associations="answers" data-association-insertion-template=" &lt;div class=&quot;field&quot;&gt;
&lt;label for=&quot;exam_questions_attributes_new_questions_answers_attributes_new_answers_name&quot;&gt;Answer:&lt;/label&gt;
&lt;textarea name=&quot;exam[questions_attributes][new_questions][answers_attributes][new_answers][name]&quot; id=&quot;exam_questions_attributes_new_questions_answers_attributes_new_answers_name&quot; cols=&quot;50&quot;&gt;
&lt;/textarea&gt;
&lt;/div&gt;
&lt;div class=&quot;field&quot;&gt;
&lt;label for=&quot;exam_questions_attributes_new_questions_answers_attributes_new_answers_correct&quot;&gt;Correct&lt;/label&gt;
&lt;input name=&quot;exam[questions_attributes][new_questions][answers_attributes][new_answers][correct]&quot; type=&quot;hidden&quot; value=&quot;0&quot; /&gt;&lt;input type=&quot;checkbox&quot; value=&quot;1&quot; name=&quot;exam[questions_attributes][new_questions][answers_attributes][new_answers][correct]&quot; id=&quot;exam_questions_attributes_new_questions_answers_attributes_new_answers_correct&quot; /&gt;
&lt;/div&gt;
&lt;div class=&quot;field&quot;&gt;
&lt;input value=&quot;1&quot; type=&quot;hidden&quot; name=&quot;exam[questions_attributes][new_questions][answers_attributes][new_answers][creator_id]&quot; id=&quot;exam_questions_attributes_new_questions_answers_attributes_new_answers_creator_id&quot; /&gt;
&lt;/div&gt;
&lt;div class=&quot;field&quot;&gt;
&lt;input value=&quot;1&quot; type=&quot;hidden&quot; name=&quot;exam[questions_attributes][new_questions][answers_attributes][new_answers][department_id]&quot; id=&quot;exam_questions_attributes_new_questions_answers_attributes_new_answers_department_id&quot; /&gt;
&lt;/div&gt;
&lt;div class=&quot;field&quot;&gt;
&lt;label for=&quot;exam_questions_attributes_new_questions_answers_attributes_new_answers_locked&quot;&gt;Locked&lt;/label&gt;
&lt;input name=&quot;exam[questions_attributes][new_questions][answers_attributes][new_answers][locked]&quot; type=&quot;hidden&quot; value=&quot;0&quot; /&gt;&lt;input type=&quot;checkbox&quot; value=&quot;1&quot; name=&quot;exam[questions_attributes][new_questions][answers_attributes][new_answers][locked]&quot; id=&quot;exam_questions_attributes_new_questions_answers_attributes_new_answers_locked&quot; /&gt;&lt;br&gt;
&lt;input type=&quot;hidden&quot; name=&quot;exam[questions_attributes][new_questions][answers_attributes][new_answers][_destroy]&quot; id=&quot;exam_questions_attributes_new_questions_answers_attributes_new_answers__destroy&quot; value=&quot;false&quot; /&gt;&lt;a class=&quot;remove_fields dynamic&quot; href=&quot;#&quot;&gt;remove answer&lt;/a&gt;
&lt;/div&gt;
" href="#">add_answer</a>
<hr>
</div>
</div>
" href="#">add_question</a>
</div>
<div class="actions">
<input type="submit" name="commit" value="Update Exam" data-disable-with="Update Exam" />
</div>
</form>
Show |
Back
<br><br><br>
</div>
</div>
</body>
</html>
It would be great to see controller part for it where #exam is defined
I assume that in your prod case (where form doesn't show) association questions is empty.
So there are several variants:
1.In controller always build a question if the association is empty
#exam.questions.build if #exam.questions.blank?
2.You can add entity in the view
f.fields_for :questions, #exam.questions.presence || [#exam.questions.build] do |question|
3.Take into account such case in view and show proper message
<% if #exam.questions.present? %>
<%= render 'questions_part' %>
<% else %>
<%= render 'no_questions_partial' %>
<% end %>
I think 1 variant is better.
OK I finally figured it out. I had to precompile assets. Working now.
Thanks to those who offered suggestions. I really appreciate your time.

Rail 4: Conditionals in a Scaffold

I am still learning RoR but I cant learn by following someone else's code. I have decided to implement by own app.
I have generated a scaffold and in the _form.html.erb I have this:
<div class="field">
<%= f.label :bath_accessories %><br>
<%= f.select :bath_accessories, options_for_select(["Shower", "Extractor Fan", "Lights", "Shaver", "Heat Rail"]) %><br>
</div>
When the user selects "Shower" from the above lists, I want to enable in view:
<div class="field">
<%= f.label :watts %><br>
<%= f.number_field :watts %>
</div>
I am lost where to put the if statement for: <%= f.select :bath_accessories, options_for_select(["Shower", "Extractor Fan", "Lights", "Shaver", "Heat Rail"]) %> But I did this and nothing shows:
<% if :bath_accessories[0] %>
# What to out put here with "<%= code %>?
Generated HTML Tag:
<form class="new_bathroom_accessory" id="new_bathroom_accessory" action="/bathroom_accessories" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="✓" /><input type="hidden" name="authenticity_token" value="r9M+Q7Np+/i68gwj65JSvV8wi4+4yb5d6tFWBHMw8k9nz1oRHGzh7AZHOTFvlaiS2lmqTch356vVYNlh7Urifw==" />
<div class="field">
<label for="bathroom_accessory_bath_accessories">Bath accessories</label><br>
<select name="bathroom_accessory[bath_accessories]" id="bathroom_accessory_bath_accessories"><option value="Shower">Shower</option>
<option value="Extractor Fan">Extractor Fan</option>
<option value="Lights">Lights</option>
<option value="Shaver">Shaver</option>
<option value="Heat Rail">Heat Rail</option></select><br>
</div>
<div class="field">
<label for="bathroom_accessory_watts">Watts</label><br>
<input type="number" name="bathroom_accessory[watts]" id="bathroom_accessory_watts" />
</div>
<div class="field">
<label for="bathroom_accessory_volts">Volts</label><br>
<input type="number" name="bathroom_accessory[volts]" id="bathroom_accessory_volts" />
</div>
<div class="actions">
<input type="submit" name="commit" value="Create Bathroom accessory" />
</div>
</form>
By adding an id to particular <div>,you can control that <div> as per user selection.
<div class="field" id="shower_id">
<%= f.label :watts %><br>
<%= f.number_field :watts %>
</div>
And you need JavaScript or JQuery code like this
$('#bathroom_accessory_bath_accessories').on('change',function(){
if( $(this).val()==="Shower"){
$("#shower_id").show()
}
else{
$("#shower_id").hide()
}
});
DEMO

Rails form_for layout links in line

I have the layout presently using nested_form_for as:
with the code as simply:
<%= f.label :monday %>
<%= f.check_box :monday %>
<%= f.label :tuesday %>
<%= f.check_box :tuesday %>
<%= f.label :wednesday %>
<%= f.check_box :wednesday %>
<%= f.label :thursday %>
<%= f.check_box :thursday %>
But I would like if these attributes could like listed in a straight line with breaks such as:
Monday | Tuesday | Wednesday | Thursday ....
Is there a setting in nested_form_for to allow this?
Note below is the HTML generated from the first response
<hr>
<strong>Day(s) special Will Appear</strong>
<ul id="dayForm">
<label for="campaign_monday">Monday</label>
<input name="campaign[monday]" type="hidden" value="0" /><input id="campaign_monday" name="campaign[monday]" type="checkbox" value="1" />
<label for="campaign_tuesday">Tuesday</label>
<input name="campaign[tuesday]" type="hidden" value="0" /><input id="campaign_tuesday" name="campaign[tuesday]" type="checkbox" value="1" />
<label for="campaign_wednesday">Wednesday</label>
<input name="campaign[wednesday]" type="hidden" value="0" /><input id="campaign_wednesday" name="campaign[wednesday]" type="checkbox" value="1" />
<label for="campaign_thursday">Thursday</label>
<input name="campaign[thursday]" type="hidden" value="0" /><input id="campaign_thursday" name="campaign[thursday]" type="checkbox" value="1" />
<label for="campaign_friday">Friday</label>
<input name="campaign[friday]" type="hidden" value="0" /><input id="campaign_friday" name="campaign[friday]" type="checkbox" value="1" />
<label for="campaign_saturday">Saturday</label>
<input name="campaign[saturday]" type="hidden" value="0" /><input id="campaign_saturday" name="campaign[saturday]" type="checkbox" value="1" />
<label for="campaign_sunday">Sunday</label>
<input name="campaign[sunday]" type="hidden" value="0" /><input id="campaign_sunday" name="campaign[sunday]" type="checkbox" value="1" />
</ul>
Rails form_for helpers help you generate HTML; the HTML generated is still subject to the same rules as other HTML elements. Rails offers ways to add HTML/CSS to the form fields themselves, which may be what you are looking for. For example,
<%= f.label :monday, :class => 'inline' %>
The :class => 'inline' adds the class 'inline' to the HTML form element on the page and you can add styling thereafter to .inline {} in your css file.
But you could also simply do something like:
Wrap the form fields with a <ul> tag,
<ul id="dayForm">
<%= f.label :monday %>
<%= f.check_box :monday %>
<%= f.label :tuesday %>
<%= f.check_box :tuesday %>
<%= f.label :wednesday %>
<%= f.check_box :wednesday %>
<%= f.label :thursday %>
<%= f.check_box :thursday %>
</ul>
And in your css file,
ul#dayForm {
list-style: none;
}
ul#dayForm input {
display: list-item;
float: left;
width: 100px; /* adjust depending on desired size */
}
ul#dayForm label {
display: list-item;
float: left;
width: 100px; /* adjust depending on desired size */
}
To create the inline effect that you are looking for.

How do I create an interactive form with Simple Form?

I have a model (Listing) that has many, many attributes (say 25).
I would like to create an AJAX form that is dynamic based on the input in the form.
Meaning that if a user chooses type=b, they will see other fields that they should see and not ones they shouldn't.
Ideally they should load immediately, with the right content from the db - i.e. in an AJAXy way.
What's the best way to approach this?
Thanks.
Edit: Here is an example of my _form.html.erb. You will notice that I have included 2 if statements that indicate which fields should show if the property_type value chosen is one of those specified:
<%= simple_form_for(#listing) do |f| %>
<%= f.error_notification %>
<div class="form-inputs">
<%= f.input :headline %>
<%= f.input :price %>
<%= f.association :property_type %>
If property_type == "coop"
<%= f.input :maintenance %>
<%= f.input :coop_deductible %>
<%= f.input :flip_tax %>
if property_type == "condo"
<%= f.input :common_charges %>
<%= f.input :taxes %>
</div>
<div class="form-actions">
<%= f.button :submit %>
</div>
<% end %>
Edit 2:
This is the Rails form helper that I used - powered by the gem Simple_Form:
<%= simple_form_for #listing, :defaults => { :wrapper_html => { :class => 'form-horizontal' } } do |f| %>
<%= f.error_notification %>
<fieldset>
<%= f.association :listing_category, :label => "Category: ", :label_html => { :class => "control-label"}, :wrapper_html => { :class => "controls"} %>
<div style="display: none;" data-show-for="Exclusive">
<%= f.association :listing_type %>
<%= f.association :user %>
<%= f.association :boro %>
</div>
<div style="display: none;" data-show-for="Open">
<%= f.association :neighborhood %>
<%= f.association :building %>
<%= f.association :term %>
<%= f.association :property_type %>
</div>
<div class="form-actions">
<%= f.button :submit, :class => "btn btn-primary" %>
<!-- <button type="submit" class="btn btn-primary">Save and Continue</button>
<button type="reset" class="btn">Cancel</button> -->
</div>
</fieldset>
<% end %>
This is the HTML it produced:
<form accept-charset="UTF-8" action="/listings" class="simple_form new_listing" id="new_listing" method="post" novalidate="novalidate"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓" /><input name="authenticity_token" type="hidden" value="1oDfg41Wx/SiPCsvf4qTAcxhFUGSNlhlLfkMy8nHW1E=" /></div>
<fieldset>
<div class="control-group select optional controls"><label class="select optional control-label control-label" for="listing_listing_category_id">Category:</label><div class="controls"><select class="select optional" id="listing_listing_category_id" name="listing[listing_category_id]"><option value=""></option>
<option value="1">Exclusive</option>
<option value="2">Open</option></select></div></div>
<div style="display: none;" data-show-for="Exclusive">
<div class="control-group select optional form-horizontal"><label class="select optional control-label" for="listing_listing_type_id">Listing type</label><div class="controls"><select class="select optional" id="listing_listing_type_id" name="listing[listing_type_id]"><option value=""></option>
</select></div></div>
<div class="control-group select optional form-horizontal"><label class="select optional control-label" for="listing_user_id">User</label><div class="controls"><select class="select optional" id="listing_user_id" name="listing[user_id]"><option value=""></option>
<option value="1">First User</option>
<option value="2">Second User</option>
<option value="3">Third User</option>
<option value="4">Fourth User</option>
<option value="5">Fifth User</option></select></div></div>
<div class="control-group select optional form-horizontal"><label class="select optional control-label" for="listing_boro_id">Boro</label><div class="controls"><select class="select optional" id="listing_boro_id" name="listing[boro_id]"><option value=""></option>
<option value="1">Brooklyn</option></select></div></div>
</div>
<div style="display: none;" data-show-for="Open">
<div class="control-group select optional form-horizontal"><label class="select optional control-label" for="listing_neighborhood_id">Neighborhood</label><div class="controls"><select class="select optional" id="listing_neighborhood_id" name="listing[neighborhood_id]"><option value=""></option>
<option value="1">Prospect Heights</option></select></div></div>
<div class="control-group select optional form-horizontal"><label class="select optional control-label" for="listing_building_id">Building</label><div class="controls"><select class="select optional" id="listing_building_id" name="listing[building_id]"><option value=""></option>
<option value="1">Trump Towers</option></select></div></div>
<div class="control-group select optional form-horizontal"><label class="select optional control-label" for="listing_term_id">Term</label><div class="controls"><select class="select optional" id="listing_term_id" name="listing[term_id]"><option value=""></option>
</select></div></div>
<div class="control-group select optional form-horizontal"><label class="select optional control-label" for="listing_property_type_id">Property type</label><div class="controls"><select class="select optional" id="listing_property_type_id" name="listing[property_type_id]"><option value=""></option>
<option value="1">Coop</option></select></div></div>
</div>
<div class="form-actions">
<input class="btn btn btn-primary" name="commit" type="submit" value="Create Listing" />
<!-- <button type="submit" class="btn btn-primary">Save and Continue</button>
<button type="reset" class="btn">Cancel</button> -->
</div>
</fieldset>
</form>
This is the JS that I included in my listing.js - which corresponds to the file that this form is on app/views/listings/new.html.erb
$(document).ready(function({
$('#listing_listing_category_id').on('change', function(){
var option = $(this).find(':selected');
$('[data-show-for]').hide(); //And maybe reset?
$('[data-show-for="+ option.text +"]').show()
});
});
When I chose the option I want, it doesn't show me the fields I want to see.
Personally I wouldn't use AJAX, just straight JS/JQuery to show/hide on click using data attributes.
See fiddle: http://jsfiddle.net/XnPZF/
First, add the data attributes to the sections you want to hide/show:
<div style="display: none;" data-show-for="coop">
<%= f.input :maintenance %>
<%= f.input :coop_deductible %>
<%= f.input :flip_tax %>
</div>
<div style="display: none;" data-show-for="condo">
<%= f.input :common_charges %>
<%= f.input :taxes %>
</div>
Then create a change event on the select:
$('#listing_property_type').on('change', function(){
var option = $(this).find(':selected');
$('[data-show-for]').hide(); //And maybe reset?
$('[data-show-for='+ option.text() +']').show()
});
For data-show-for, you can use Option text or value, just be sure to make sure the event knows which. If you plan to use this a lot of times, you could generalize it, but that would mean building your options.

Why isn't my signup form working until all of the form fields are filled?

A few days ago, my signup form for an app I'm building was working fine. The 'create my account' button would work even if no form fields were filled, and an error message would be displayed right away. Now, when I try to submit the form, the form only will submit or show error messages when all of the fields have been filled. If I try to submit the form without filling all of the fields, nothing happens. The signup button doesn't work correctly.
The only significant change that I made that I can think of is switching the stripe plan I was using to a free trial plan instead of a plan where the purchaser of the application pays up-front. I have no idea what could be causing this problem, so I don't know what code I should post. Any help you can provide would be appreciated.
The signup form I have in rails is as follows(minus some javascript that I'm using for Stripe):
<div class="row">
<div class="span6 offset4">
<%= form_for(#user) do |f| %>
<%= render 'shared/error_messages' %>
<%= f.label :name %>
<%= f.text_field :name %>
<%= f.label :email %>
<%= f.text_field :email %>
<%= f.label :password %>
<%= f.password_field :password %>
<%= f.label :password_confirmation, "Password confirmation" %>
<%= f.password_field :password_confirmation %>
<%= f.label :morning_meds, "Do you take medications in the morning?" %>
<%= f.select :morning_meds, [['Yes'], ['No']] %>
<%= f.label :lunch_meds, "Do you take medications at lunch?" %>
<%= f.select :lunch_meds, [['Yes'], ['No']] %>
<%= f.label :night_meds, "Do you take medications in the evening?" %>
<%= f.select :night_meds, [['Yes'], ['No']] %>
<%= f.label :time_zone, "Choose your time zone" %>
<%= f.select :time_zone, [['Eastern'], ['Central'], ['Mountain'], ['Pacific']] %>
<%= f.label :phone_number, "Your cell phone number" %>
<%= f.text_field :phone_number %>
<div class="form-row">
<label>Card Number</label>
<input type="text" size="20" autocomplete="off" class="card-number" />
</div>
<div class="form-row">
<label>CVC</label>
<input type="text" size="4" autocomplete="off" class="card-cvc" />
</div>
<div class="form-row">
<label>Expiration Date</label>
<%= select_month nil, {add_month_numbers: true}, {name: nil, class: 'card-expiry-month' } %>
<span> / </span>
<%= select_year nil, {start_year: Date.today.year, end_year: Date.today.year+15}, {name: nil, class: 'card-expiry-year' } %>
</div>
<%= f.submit "Create my account", class: "btn btn-large btn-primary" %>
<% end %>
</div>
</div>
<div class="row">
<div class="span6 offset4">
<form accept-charset="UTF-8" action="/users" class="new_user" id="new_user" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓" /><input name="authenticity_token" type="hidden" value="QqrFVykfeY1+9jImvp8VjTzrQxq8VlBF+vC6V85klw0=" /></div>
<label for="user_name">Name</label>
<input id="user_name" name="user[name]" size="30" type="text" />
<label for="user_email">Email</label>
<input id="user_email" name="user[email]" size="30" type="text" />
<label for="user_password">Password</label>
<input id="user_password" name="user[password]" size="30" type="password" />
<label for="user_password_confirmation">Password confirmation</label>
<input id="user_password_confirmation" name="user[password_confirmation]" size="30" type="password" />
<label for="user_morning_meds">Do you take medications in the morning?</label>
<select id="user_morning_meds" name="user[morning_meds]"><option value="Yes">Yes</option>
<option value="No">No</option></select>
<label for="user_lunch_meds">Do you take medications at lunch?</label>
<select id="user_lunch_meds" name="user[lunch_meds]"><option value="Yes">Yes</option>
<option value="No">No</option></select>
<label for="user_night_meds">Do you take medications in the evening?</label>
<select id="user_night_meds" name="user[night_meds]"><option value="Yes">Yes</option>
<option value="No">No</option></select>
<label for="user_time_zone">Choose your time zone</label>
<select id="user_time_zone" name="user[time_zone]"><option value="Eastern">Eastern</option>
<option value="Central">Central</option>
<option value="Mountain">Mountain</option>
<option value="Pacific">Pacific</option></select>
<label for="user_phone_number">Your cell phone number</label>
<input id="user_phone_number" name="user[phone_number]" size="30" type="text" />
<div class="form-row">
<label>Card Number</label>
<input type="text" size="20" autocomplete="off" class="card-number" />
</div>
<div class="form-row">
<label>CVC</label>
<input type="text" size="4" autocomplete="off" class="card-cvc" />
</div>
<div class="form-row">
<label>Expiration Date</label>
<select class="card-expiry-month" id="date_month">
<option value="1">1 - January</option>
<option value="2">2 - February</option>
<option value="3">3 - March</option>
<option value="4">4 - April</option>
<option value="5">5 - May</option>
<option value="6">6 - June</option>
<option value="7">7 - July</option>
<option value="8">8 - August</option>
<option value="9">9 - September</option>
<option value="10">10 - October</option>
<option value="11">11 - November</option>
<option value="12">12 - December</option>
</select>
<span> / </span>
<select class="card-expiry-year" id="date_year">
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
<option value="2025">2025</option>
<option value="2026">2026</option>
<option value="2027">2027</option>
</select>
</div>
<input class="btn btn-large btn-primary" name="commit" type="submit" value="Create my account" />
</form>
It'd be helpful to see the HTML source your view generates, but you likely have 1+ fields with the HTML5 required attribute that you are leaving blank.
By default, newer browsers like Chrome will not allow the form to submit until all fields flagged with the required attribute have a value. To stop this you can add the novalidate attribute to the <form ... tag.
<%= form_for(#user, { :novalidate => true }) do |f| %>

Resources