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()
Related
I am just trying to set up a basic application with Ruby on Rails. I have the basic CRUD functions for different entities and with one of them, the form that is supposed to load when the user wants to edit a row does not appear. It knows which ID it needs to edit, it just doesn't load the form.
Link to take you to edit page;
<%= link_to 'Edit Review'. edit_review_path(review) %>
Controller function;
def edit
#review=Review.find(params[:id])
end
HTML Form;
<div class="container">
<h2>Edit Review Details</h2>
<% form_for #review do |f| %>
<div class="form-group">
<%= f.label :"Profile" %><br />
<%= f.select :ProfileId, Profile.all.collect {|x| [x.Name,x.id]}, {:include_blank => 'Select Profile'}, class:'form-control'%> <br /><br />
</div>
<div class="form-group">
<%= f.label :"Product" %><br />
<%= f.select :ProductId, Product.all.collect {|x| [x.pName,x.id]}, {:include_blank => 'Select Product'}, class:'form-control'%>
</div>
<div class="form-group">
<%= f.label :"Review Author" %>
<%= f.text_field :Author %>
</div>
<div class="form-group">
<%= f.label :"Product Rating" %>
<%= f.number_field :ProductRating %>
</div>
<div class="form-group">
<%= f.label :"Review Text"%>
<%= f.text_field :ReviewText %>
</div>
<div class="form-group">
<%= f.label :"Date of Review" %>
<%= f.date_field :DateofReview %>
</div>
<div class="form-group">
<%= f.submit %>
</div>
<% end %>
</div>
I have 2 models that have a working update feature and they are the exact same code as this however for this, when I click the button. The page loads but nothing appears other than the text.
Can someone explain why this is happening? I thought it may be the dropdown boxes but I removed them and still no form loaded up.
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 have a classic form_for:
<div class="field">
<%= f.label "Modèle" %>
<%= f.text_field :model, required: true %>
</div>
<div class="field">
<%= f.label "Immatriculation" %>
<%= f.text_field :license_plate, required: true %>
</div>
<div class="field">
<%= f.label "Complément" %>
<%= f.text_field :complement, required: true%>
</div>
<div class="field">
<%= f.label "Puissance CV" %>
<%= f.number_field :horse_power, required: true %>
</div>
<div class="field">
<%= f.label "Indemnité KM" %>
<%= f.number_field :km_compensation, required: true%>
</div>
<div class="actions">
<%= f.submit 'Sauvegarder' %>
</div>
I would like to use another model inside this view, that would also update when the user clicks the submit button. I know this has to do with nested forms but I'm a little confused about how to implement it. Here's the variable from the second model that I would like to add:
<% #trip_distances.each do |t| %>
<%= form_for(t) do |e| %>
<div class="field">
<%= e.text_field t.id_contract %>
<%= e.number_field t.length %>
</div>
<% end %>
Obviously this is not correct. I guess I need to use the field_for method?
Firstly, consider using simple_form gem, as it cleans up a bit the code, and is overall more developer-friendly :)
Then in your view you will have something like
<%= simple_form_for sth do |form| %>
<% form.input :attributeUno %>
<% form.input :length %>
...
Then to add to this form inputs for nested element add simple_fields_for
<% #trip_distances.each do |t|
<%= form.simple_fields_for t do |fields| %>
<% fields.input :length %>
...
And don't forget to add
accepts_nested_attributes_for :something in your model :)
PS: You should also consider using slim or haml to make creating views a bit easier, and also clean them up :)
I have this form:
<fieldset data-model="idea-art" class="idea-edit">
<h2>Artwork Specs</h2>
<%= form_for #idea do |f| %>
<div data-attribute="art_status" class="edit-field">
<%= f.label :art_status, "Art Status" %>
<%= f.select :art_status, Idea::ART_STATUSES %>
</div>
<div data-attribute="artist" class="edit-field">
<%= f.label :artist_id, "Artist" %>
<%= f.select :artist_id, User.artists.collect{|x|[x.full_name, x.id]}, :include_blank =>
true %>
</div>
<div data-attribute="default_size" class="edit-field">
<%= f.label :default_artwork_id, "Default Artwork" %>
<%= f.select :default_artwork_id, #idea.artworks.collect{|x|[x.dimensions, x.id]},
:include_blank => true %>
</div>
<div data-attribute="colors_offered" class="edit-field">
<%= f.label :colors, 'Colors Offered' %>
<%= f.collection_select :color_ids, Color.master_colors.order(:name), :id, :name, {},
{multiple: true}%>
</div>
<div data-attribute="base" class="edit-field">
<%= f.label :base, "Base" %>
<%= f.check_box :base %>
</div>
<div data-attribute="special_instructions" class="edit-field">
<%= f.label :special_instructions, "Special Instructions" %>
<%= f.text_area :special_instructions %>
</div>
<div data-attribute="artwork" class="edit-field">
<%= f.fields_for :artworks do |artworks_f| %>
<%= render 'artwork_fields', f: artworks_f %>
<% end %>
<p>
<%= link_to_add_fields "Click To Add Artwork", f, :artworks %>
</p>
</div>
<%= f.submit %>
<%end%>
</fieldset>
when I click submit my changes are not updated. I have tried many things and nothing seems to work. I am new to ruby and have read the RailsGuide to form helpers and I still can't quite figure it out.
Is there something I am missing?
Thanks
Do you see the request in Rails server log? If so, look for a Rollback in the log, which might indicate that ur models are invalid, perhaps due to strong parameters settings. If the request is not making it to the server, inspect for javascript errors on the page, then make sure you're not using (or intend to use) ajax requests, in which case you might need to require jquery_ujs in application.js along with csrf_meta_tag in you layout.
I'd like to have a single form that has 2 or more field-set_tags and I'd like to have a single submit button to update the changes for all field_set_tags at once, but that's not working ; if I create a form for each field_set_tag and one submit button per form, it works fine ; anyone can help? my simplified partial view _form.html.erb has the following structure
<%= form_for(#my_form) do |f| %>
<%= field_set_tag "Field Set A" do %>
<div class="field>
<%= f.label :"Configure A" %>
<%= f.check_box :ConfigA %>
<%= f.label :"Login" %>
<%= f.text_field :A_Login, {:size => 12} %>
<%= f.label :"Password" %>
<%= f.password_field :A_Password, {:size => 12} %>
<!-- more Ruby code here -->
</div>
<% end %>
<%= field_set_tag "Field Set B" do %>
<div>
<%= f.label :"Configure B" %>
<%= f.check_box :ConfigB %>
<%= f.label :"Login" %>
<%= f.text_field :B_Login, {:size => 12} %>
<%= f.label :"Password" %>
<%= f.password_field :B_Password, {:size => 12} %>
<!-- more Ruby code here -->
</div>
<% end %>
<div class="actions">
<%= f.submit "Update" %>
</div>
<!-- more field_sets and Ruby code here -->
<% end %>
I also tried this with no luck either
<input type="submit" value="Update" />
My issue was caused by a button I configured as a place holder for future use like this
<div class="field">
<%= button_to "Advanced" %>
</div>
When I removed that button, all worked fine
In a similar way, I configured 2 successive submit buttons like this
<div class="actions">
<%= button_to "Update", :type => "submit" %>
</div>
<div class="actions">
<%= button_to "Update", :type => "submit" %>
</div>
the 1st one does submit but the 2nd one generates this error
Unknown action
The action '4' could not be found for L2CircuitTestsController
2 or more successive "Advanced" buttons cause the same behavior : only the 1st one does the job and the other are eclipsed!