Formtastic: nested fieldsets produce unusable/invalid markup - ruby-on-rails

I'm trying to group related attributes into a "Doublefield" by putting them into a form.inputs block:
<%= semantic_form_for MyModel.new do |f| %>
<%= f.inputs 'Advanced' do %>
<%= f.input :name %>
<%= f.inputs 'Min/Max', class: 'doublefield' do %>
<%= f.input :min %>
<%= f.input :max %>
<% end %>
<%= f.inputs 'Zip/Place', class: 'doublefield' do %>
<%= f.input :zip %>
<%= f.input :place %>
<% end %>
<% end %>
<% end %>
However, this produces a markup like that (omitted irrelevant markup):
<form accept-charset="UTF-8" action="my_model" class="formtastic" id="new_my_model" method="post" novalidate="novalidate">
<fieldset class="inputs">
<ol>
<li class="string input optional stringish" id="my_model_name_input">
...
</li>
<li class="input">
<fieldset class="doublefield">
...
</fieldset>
</li>
<fieldset class="doublefield">
...
</fieldset>
</ol>
</fieldset>
</form>
Only the first nested fieldset in the fieldset gets surrounded by the <li> tag, the others are just rendered as <fieldset> which leads to invalid markup (<fieldset> as direct child of <ol> is not allowed). This isn't just ugly but also makes it hard to apply styles to the form.
In my research I've stumbled upon some comments about this issue where it stated that this could have been an issue with formtastic itself, but I haven't found a workaround or suggestion up until now.
Any ideas?
Version Information:
rails (3.2.0.beta bd4bd3f)
formtastic (2.0.0.rc4 7d3bb2f)
ruby 1.9.2p290 (2011-07-09 revision 32553) [x86_64-linux]
Full markup:
<form accept-charset="UTF-8" action="my_model" class="formtastic" id="new_my_model" 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="zPm0lLyT6MM4M+LI1b7c9d7NqGQM2PiT+kHsjUnfTWM="></div>
<fieldset class="inputs">
<legend><span>Advanced</span></legend>
<ol>
<li class="string input optional stringish" id="my_model_name_input">
<label class=" label" for="my_model_name">Name</label>
<input id="my_model_name" maxlength="255" name="my_model[name]" type="text">
</li>
<li class="input">
<fieldset class="doublefield">
<legend><span>Min/Max</span></legend>
<ol>
<li class="number input optional stringish" id="my_model_min_input">
<label class=" label" for="my_model_roosts_min">Min</label>
<input id="my_model_min" maxlength="4" name="my_model[min]" step="any" type="number">
</li>
<li class="number input optional stringish" id="my_model_max_input">
<label class=" label" for="my_model_max">Max</label>
<input id="my_model_roosts_max" maxlength="4" name="my_model[max]" step="any" type="number">
</li>
</ol>
</fieldset>
</li>
<fieldset class="doublefield">
<legend><span>Zip/Place</span></legend>
<ol>
<li class="string input optional stringish" id="my_model_zip_input">
<label class=" label" for="my_model_zip">Zip</label>
<input id="my_model_zip" maxlength="255" name="my_model[zip]" type="text">
</li>
<li class="string input optional stringish" id="my_model_place_input">
<label class=" label" for="my_model_place">Place</label>
<input id="my_model_place" maxlength="255" name="my_model[place]" type="text">
</li>
</ol>
</fieldset>
</ol>
</fieldset>
</div>

[EDIT] made the answer relevant to Formtastic 2
This was a bug in formtastic, which has been fixed 3 days ago: https://github.com/justinfrench/formtastic/commit/4c5bf686b7fc5bbbc2e03c61cace101e713a51e0
If you don't want to wait for the release (and you likely don't), use the version from git:
gem 'formtastic', :git => 'git://github.com/justinfrench/formtastic.git'

Related

Rails 3: Make token inputs sortable

I am using token inputs in a text field and would like to also make these tokens sortable (JQuery UI). I am using Ryan Bates screencast to get started however I am unsure how to apply content_for to my code. Here is what I have...
<fieldset id="presenters">
<p>
<%= event_form.label :presenter_tokens, "Presenters" %>
<%= event_form.text_field :presenter_tokens, "data-pre" => #event.presenter_tokens_tokeninput.to_json %>
</p>
</fieldset>
Here is the HTML I get...
<fieldset id="presenters">
<p>
<label for="event_presenter_tokens">Presenters</label>
<ul class="token-input-list-facebook">
<li class="token-input-token-facebook">
<p>Mark</p>
<span class="token-input-delete-token-facebook">×</span>
</li>
<li class="token-input-token-facebook">
<p>Laurie</p>
<span class="token-input-delete-token-facebook">×</span>
</li>
<li class="token-input-input-token-facebook">
</ul>
<input data-pre="[{"id":131,"name":"Mark"},{"id":1311,"name":"Laurie"}]" id="event_presenter_tokens" name="event[presenter_tokens]" size="30" type="text" value="131,1311" style="display: none;"/>
I ended up solving this problem by using https://github.com/swanandp/acts_as_list

Test with Capybara cannot find a checkbox created using Simple Form association

I have a form created using Simple Form, as such
<%= simple_form_for #organisation do |f| %>
<div class="form-inputs">
<%= f.association :causes, as: :check_boxes %>
<div class="form-actions">
<%= f.button :submit %>
</div>
<% end %>
The page works fine when I use a browser, but when I try to check this with Capybara, such as:
check('organisation_cause_ids_1')
And have tried many variations of this e.g.
find(:xpath , '//*[#id="organisation_cause_ids_1"]').set(true)
find("organisation_cause_ids_1").check
These always give an error:
Failure/Error: check('organisation_cause_ids_1')
Capybara::ElementNotFound:
Unable to find checkbox "organisation_cause_ids_1"
The HTML generated by Simple Form is:
<div class="input check_boxes optional organisation_causes">
<label class="check_boxes optional">Causes</label>
<span class="checkbox">
<label for="organisation_cause_ids_1" name="organisation[cause_ids]">
<input class="check_boxes optional" id="organisation_cause_ids_1" name="organisation[cause_ids][]" type="checkbox" value="1" />Cause A</label>
</span>
<span class="checkbox">
<label for="organisation_cause_ids_2" name="organisation[cause_ids]">
<input class="check_boxes optional" id="organisation_cause_ids_2" name="organisation[cause_ids][]" type="checkbox" value="2" />Hunger</label>
</span>
...
Edit: The problem was due to the lazy loading of the 'Causes' I created with the factories. They weren't being created so the page had no checkboxes.
Try with this
find_by_id('organisation_cause_ids_1').find("checkbox[value='1']").select_option
or maybe with this
find(:css, ".check_boxes[value='1']").set(true)

Rails form_for html being set to display: none

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.

Make all input fields on the same line

Im trying to use css to make all the fields for my form display on one line. It's part of the header nav on my page so it is important that it shows on one line instead of multiple lines.
Here's my header code at the moment.
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-target=".nav-collapse" data-toggle="collapse">
<span class="i-bar"></span>
<span class="i-bar"></span>
<span class="i-bar"></span>
</a>
<a class="brand" href="/">Bandini</a>
<div class="container nav-collapse">
<ul class="nav">
<li><%= link_to "Clients", "/clients" %></li>
<li><%= link_to "Jobs", "/jobs" %></li>
</ul>
<ul class="user_nav">
<%= render :partial => "sessions/manager" %>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
The <%= render :partial => "sessions/manager" %> part points to a partial which displayes another partial depending on the users login state.
If they are logged out, then it displays the login form and if they are logged in then it shows th currrent users email adress and a signout link.
Here's my login form.
<%= simple_form_for("user", :url => user_session_path, :html => {:id => "sign_in", :class => 'form-inline' }, :remote => true, :format => :json) do |f| %>
<%= f.input :email, :placeholder => 'Email' %>
<%= f.input :password, :placeholder => 'Password' %>
<%= f.submit 'Login' %>
<%= link_to "Forgot your password?", new_password_path('user') %>
<% end %>
The form utilizes ajax and the simple_form gem for all the markup.
Ive tried playing around in Googles element tools and adding display: inline; to all of my input fields but no such luck.
Can anyone assist or point me in the right direction?
Edit: HTML generated..
<ul class="user_nav">
<form accept-charset="UTF-8" action="/users/sign_in" class="simple_form form-inline" data-remote="true" id="sign_in" 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="fN0oKIlpnhS0WLZpKQafln+182IT1ONVuDP0eRtT8fg=" /></div>
<div class="control-group email required"><label class="email required control-label" for="user_email"><abbr title="required">*</abbr> Email</label><div class="controls"><input class="string email required" id="user_email" name="user[email]" placeholder="Email" size="50" type="email" /></div></div>
<div class="control-group password required"><label class="password required control-label" for="user_password"><abbr title="required">*</abbr> Password</label><div class="controls"><input class="password required" id="user_password" name="user[password]" placeholder="Password" size="50" type="password" /></div></div>
<input name="commit" type="submit" value="Login" />
Forgot your password?
</form>
</ul>
The reason display: inline; on your inputs is not working is because simple_form by default wraps a div tag around every input. There are two ways to fix this problem:
Create a custom wrapper for simple_form
https://github.com/plataformatec/simple_form#the-wrappers-api
Set both your inputs and the surrounding div to be inline-block:
.user_nav div, .user_nav input, .user_nav input[type="submit"] {
display: inline-block;
}
While the .user_nav input css style theoretically should not be necessary, it helps to specify it just in case there is some other CSS rule somewhere setting inputs to block. If you're sure that inputs are behaving normally, then you should be able to remove the second part of the CSS definition above.
By what documentation says http://twitter.github.com/bootstrap/components.html#navbar
Just add navbar-form class to your form and pull-left or pull-right
Also you should place it inside a li tag since you are placing it inside a ul

Creating dropdown in rails erb error

Originally I had my view setup like:
<%= render layout: 'form' do |f| %>
<% for holiday in Holiday.find(:all) %>
<label class="checkbox">
<%= check_box_tag "user[holiday_ids][]", holiday.id, #user.holidays.include?(holiday) %>
<%= holiday.name %>
</label>
Which rendered a list of 8 "interests". However, I needed 3 out of these 8 to have unique div id's in order to have a jquery show/hide function to display divs below them when checked. To do this i just took the html rendered by the above erb code and pasted it into my view and manually modified it to work with the jquery statement (pasted below).. My question is that in these div's that are displayed by the jquery i need to have a dropdown which is populated by another model in my app.. How can i achieve this? I attempted the statement in the first div but its causing the following error (code taken from my _form partial):
undefined method `map' for nil:NilClass
Extracted source (around line #12):
9: </ul>
10: </div>
11: <% end %>
12: <%= yield f %>
13:
14: <div class="actions">
15: <%= f.submit "Continue" %>
Here is my _form Partial:
<%= form_for #user, url: wizard_path do |f| %>
<% if #user.errors.any? %>
<div class="error_messages">
<h2><%= pluralize(#user.errors.count, "error") %> prohibited this user from being saved:</h2>
<ul>
<% #user.errors.full_messages.each do |msg| %>
<li><%= msg %></li>
<% end %>
</ul>
</div>
<% end %>
<%= yield f %>
<div class="actions">
<%= f.submit "Continue" %>
or <%= link_to "skip this step", next_wizard_path %>
</div>
<% end %>
Here is the HTML + erb statement i am attempting..
<%= render layout: 'form' do |f| %>
<div id="checkbox">
<label class="checkbox">
<input id="user_holiday_ids_" name="user[holiday_ids][]" type="checkbox" value="2" />
Valentine Day
</label>
</div>
<div style="display:none;">
<%= select_tag 'Interests', options_for_select(#interests) %>
</div>
<div id="checkbox">
<label class="checkbox">
<input id="user_holiday_ids_" name="user[holiday_ids][]" type="checkbox" value="4" />
Mothers Day
</label>
</div>
<div style="display:none;">
Whatever you have to capture here<input type="text" id="foo2" />
</div>
<label class="checkbox">
<input id="user_holiday_ids_" name="user[holiday_ids][]" type="checkbox" value="7" />
Thanksgiving
</label>
<div id="checkbox">
<label class="checkbox">
<input id="user_holiday_ids_" name="user[holiday_ids][]" type="checkbox" value="5" />
Father's Day
</label></div>
<div style="display:none;">
Whatever you have to capture here<input type="text" id="foo3" />
</div>
<label class="checkbox">
<input id="user_holiday_ids_" name="user[holiday_ids][]" type="checkbox" value="3" />
Easter
</label>
<label class="checkbox">
<input id="user_holiday_ids_" name="user[holiday_ids][]" type="checkbox" value="6" />
Halloween
</label>
<label class="checkbox">
<input id="user_holiday_ids_" name="user[holiday_ids][]" type="checkbox" value="8" />
Christmas
</label>​
<% end %>
I think I had a similar problem with the view not seeing my variable, this is how I fixed it
<% #resources.each do |resource| %>
<%= render 'layouts/resources_expanded', :resource => resource %>
<% end %>
I've never seen <%= yield f %>
Don't you have to do:
<%= yield 'form', {:f => f} %>
Good Luck.

Resources