I made a very simple form using bootstrap_form_for:
<%= bootstrap_form_for(#ad) do |f| %>
<%= f.text_field :title %>
<%= f.text_area :body %>
<%= f.text_field :image %>
<%= f.text_field :user_id %>
<%= f.submit %>
<% end %>
However, in the text_area for the 'body' field, this is the html generated:
<div class="form-group">
<label class="control-label" for="ad_body">Body</label>
<textarea class="form-control" name="ad[body]" id="ad_body" style="display: none !important;"></textarea>
</div>
For some reason, it's set to display:none. I searched anywhere in the application and couldn't find a place I set it to display:none.
Any clue?
I'm using Ruby 2.2.3 and Rails 4.2.4.
For anyone facing this issue, I managed to fix it just by changing the column name from body to ad_body. It's just that probably body is a protected term.
Related
I've been breaking my head with the following problem... I have a basic and functional rails app to record events, I used scaffolds to build the model and all, users can record events with their datetime, everything works. However, as soon as I add "Materialize" to the app, it breaks all the datetime, date, and time selectors in forms.
After Materialize, the datetime_selector generated by Rails in my form just aren't actionable at all and they seem weird (Screenshots included)
– This happens if I install the gem manually or if I install it with bower. I am aware that materialze has a special "datepicker" class for date_selectors. Using this makes no difference.
– I have no other CSS being applied to my form (I removed all scaffolds.css). If I try applying material design styles manually, the forms do work, but I can't use Materialize then.
Any thoughts on why this happens and how to fix it?
Screenshots:
<%= form_for(#event) do |f| %>
<% if #event.errors.any? %>
<div id="error_explanation">
<h2><%= pluralize(#event.errors.count, "error") %> prohibited this event from being saved:</h2>
<ul>
<% #event.errors.full_messages.each do |message| %>
<li><%= message %></li>
<% end %>
</ul>
</div>
<% end %>
<div class="field">
<%= f.label :title %><br>
<%= f.text_field :title %>
</div>
<div class="field">
<%= f.label :datetime %><br>
<%= f.datetime_select :datetime, class: "datepicker" %>
</div>
<div class="field">
<%= f.label :date %><br>
<%= f.date_select :date, class: "datetimepicker-rails" %>
</div>
<div class="field">
<%= f.label :time %><br>
<%= f.time_select :time %>
</div>
<div class="field">
<%= f.label :address %><br>
<%= f.text_field :address %>
</div>
<div class="field">
<%= f.label :cost %><br>
<%= f.text_field :cost %>
</div>
<div class="field">
<%= f.label :category %><br>
<%= f.text_field :category %>
</div>
<div class="field">
<%= f.label :tags %><br>
<%= f.text_field :tags %>
</div>
<div class="field">
<%= f.label :image %><br>
<%= f.text_field :image %>
</div>
<div class="field">
<%= f.label :description %><br>
<%= f.text_area :description %>
</div>
<div class="actions">
<%= f.submit %>
</div>
<% end %>
Hey! So I figured it out and I'm posting this here for anyone who has the same problem.
If you use Materialize with a f.date_select in rails, it simply renders some unusable pixels on your view. Materialize documentation does mention that they use a special class for a date selector class="datepicker". And so the Materialize documentation mentions the following usage for plain html:
<input type="date" class="datepicker">
Which in ERB is equivalent to:
<%= f.date_select :date, class: "datepicker"%>
Which I obviously tried to no avail, and so I was thrown off by this, until I decided to inspect the code (the relevant part of which I list below) for the example in the Materialize website and found the code to be slightly different to their instructions...
<input type="text" class="datepicker"> #Notice the input type
which in ERB is:
<%= f.text_field :date, class: "datepicker"%>
And Voilà!! the date selector now works.
I would add to Carlos answer this, remember to initialize the Javascript using:
$('.datepicker').pickadate({
selectMonths: true, // Creates a dropdown to control month
selectYears: 15 // Creates a dropdown of 15 years to control year});
And for the form:
<%= f.text_field :date_in, class:"datepicker" %>
Hope it helps! this still working in materialize-sass (0.97.6)
I ran into this issue also. For some reason, the datetime select objects were set to display: none after adding materialize CSS
Here is my workaround. Add your own class around the datetime form
<div class="datetime">
<%= f.label :time %><br>
<%= f.datetime_select :time %><br>
</div>
Then declare your own CSS in your application.css file
.datetime select {
display: inline-flex;
width: auto;
}
I found a custom form style i want to copy. however, it's hard for me to figure out how to integrate the rails into its style since it is much more complicated than examples I've been
able to find.
Specifically, I don't know how to call the specific classes the example uses in my rails app.
I would greatly appreciate some guidance on how to create my rails form in this style:
Basically, you need to do something like:
<%= form_for #listing, html: { class:'form-inline lead-big'} do |f| %>
<div class='form-group'>
</div>
<% end %>
and then in between the .form-group div, you can either use the same code that is provided on the Bootsnipp page, or you can use Rails Form Helpers.
So instead of this:
<div class="form-group">
<label for="name">Hello, I am <span>Your name</span></label>
<input type="text" id="name" placeholder="#maridlcrmn" required>
and
</div>
it could be:
<div class="form-group">
<%= f.label :name do %>
Hello, I am <span>Your name</span>
<% end %>
<%= f.text_field :name, id: "name", placeholder: "#maridlcrmn", required: true %>
and
</div>
See this page for more: http://guides.rubyonrails.org/form_helpers.html
Really cool form I must add!
Depends if you want to do the form for a model or just submitting info. If for mode, use form_for if to submit form_tag
<%= form_tag some_url_path, method: :get do %>
<div class="form-group">
<%= label_tag :name, raw("Hello, I am <span> Your name </span>")%>
<%= text_field_tag :name%>
and
</div>
...
<%end%>
I am building a form using Ruby on Rails 4. My model has a dob attribute that is a date in the database. My _form.html.erb has an excerpt like this:
<div class="control-group">
<%= f.label :dob, :class => 'control-label' %>
<div class="controls">
<%= f.date_field :dob %>
</div>
</div>
For whatever reason, the HTML gets rendered as a regular input text box. Is there something being done wrong here?
Try
<%= f.date_select :dob %>
See more here on date fields.
I am following the Head first Rails book for creating an airline ticketing system although I am using version 3.2.13 of rails.
I have a hidden field for flight_id in a partial for adding new seats to a flight. This partial is then rendered on the flights show page. But when I view the outputted html the value for flight_id I get this,
<input type="hidden" value="flight_id" name="seat[flight_id]" id="seat_flight_id">
My code in the partial is
<%= form_for(seat) do |f| %>
<%= f.hidden_field :flight_id, value: :flight_id %>
<div class="field">
<%= f.label :baggage %><br />
<%= f.text_field :baggage %>
</div>
<div class="actions">
<%= f.submit %>
</div>
<% end %>
In my models I have
Flight.rb
has_many :seats
Seats.rb
belongs_to :flight
How do I pass the flight Id from the flight_id to the hidden field?
The flight_id is not available directly.
You can change this line
<%= f.hidden_field :flight_id, value: :flight_id %>
To
<%= f.hidden_field :flight_id, value: seat.flight.id %>
So, I have a form that uses 'date-select', which renders three select boxes per used date-select (year, month and day).
Instead I want to use datepicker, and I've followed the instructions here. However, I don't have a clue how to actually implement the datepicker in the form in the view.
I'm using the following line in application.js...
$('.datepicker').datepicker()
...so I guess I need to give the select boxes the class .datepicker?
<%= form_for #project do |f| %>
<div class="text_field">
<%= f.label :title%>
<%= f.text_field :title%>
</div>
<div class="text_field">
<%= f.label :description%>
<%= f.text_field :description%>
</div>
<div class="dropdown">
<%= f.label :start_date%>
<%= date_select :start_date, :startdate %>
</div>
<div class="dropdown">
<%= f.label :end_date%>
<%= date_select :end_date, :enddate%>
</div>
<div class="select">
<%= f.label :title%>
</div>
<div class="submit">
<%= f.submit "Spara" %>
</div>
<% end %>
Try :
<%= date_select :start_date, :startdate , :class => 'datepicker' %>
EDIT: I have replicated your code on my machine and found the possible mistakes:
This gem selects the date in a text field, not in a date-select . The input should be text_field and it looks like this:
<%= f.text_field :date, :class => 'datepicker' %>
As described in the gem's install guide , you should be sure to require it both in your application.css and application.js . One more important thing : in your projects.js.coffee make sure that the DOM is loaded , like this :
jQuery ->
$('.datepicker').datepicker()