Im trying to incorporate the best_in_place gem and got everything working, but now Im trying to get it to use material design lite to style the input when it is clicked.
Here is the html for the view:
<h2><%= best_in_place #user, :displayname, :as => :input %></h2>
And this is what the html would be for a normal text input with MDL:
<div class="mdl-textfield mdl-js-textfield">
<input class="mdl-textfield__input" type="text" id="sample1">
<label class="mdl-textfield__label" for="sample1">Text...</label>
</div>
Cant figure out what options to make this work with the best_in_place gem
I dont have the "best_in_place gem".
This is a solution I used to style a form containing an email input. I replaced the entire MDL "input" line. You would have to replace the "id"/ "for" relation and email field to something relevant to your purpose. You may have to fiddle around. Hope it points you in the right direction.
<%= form_for(#user) do |f| %>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<%= f.email_field :email, class:'mdl-textfield__input', type:'text', id:'email' %>
<label class="mdl-textfield__label" for="email">EMAIL</label>
</div>
<% end %>
Related
I'm using Rails 4.2.3 with MySql 5.5.37. I recently change the name and type of my column and now when I submit my Rails form that form field, "selection_id," is not getting captured. Below is my Rails form ...
<div class="field">
<%= f.label :day %><br>
<%= f.hidden_field :day, :validate => true %>
<div id="datepicker"></div>
</div>
<div class="field">
<%= f.label :selection_id %><br>
<div class="styled-select"><%= collection_select(:user_selection, :selection_id, #selections, :id, :description, {:prompt => true}) %></div>
</div>
<div class="field">
<%= f.label :total %><br>
<%= f.text_field :total, :size => 4, :validate => true %>
</div>
And here is the HTML that gets output to the browser ...
<div class="field">
<label for="user_selection_day">Day</label><br>
<input validate="true" type="hidden" value="02/07/2016" name="user_selection[day]" id="user_selection_day" />
<div id="datepicker"></div>
</div>
<div class="field">
<div class="field_with_errors"><label for="user_selection_selection_id">selection</label></div><br>
<div class="styled-select"><div class="field_with_errors"><select name="user_selection[selection_id]" id="user_selection_selection_id"><option value="">Please select</option>
<option value="3">option 1</option>
<option value="4">option 2</option></select></div></div>
</div>
<div class="field">
<label for="user_selection_total">Total</label><br>
<input size="4" validate="true" type="text" value="1" name="user_selection[total]" id="user_selection_total" />
</div>
I can see this data getting submitted in Chrome ...
user_selection[day]:02/19/2016
user_selection[selection_id]:3
user_selection[total]:9
but on my controller side, when I try and output the params, only two of the three are printing out. This "puts"
def create
#current_user = User.find(session["user_id"])
...
puts user_selection_params
prints
{"day"=>"02/19/2016", "total"=>"9"}
Why is this other field getting lost and how can I fix it?
You are having this problem because #object_id is a method defined on Object, the class that all Ruby objects extend. In other words, it's reserved by Ruby itself and can't be used when naming database fields / model attributes. You're going to have to rename that column/association to something else.
As a side note, it's not idiomatic Ruby to include the word "Object" in your class name. Arguably the class should just be named User, instead of UserObject.
Reference: http://ruby-doc.org/core-2.3.0/Object.html#method-i-object_id
Please don't use object_id in your model.
There should be no column named object_id in the database.
object_id is a default methods that all (except BasicObject in Ruby 1.9) objects have ...
(see docs).
I want to put this: <%= f.text_field :name %>
into the code below, but I keep getting an error. How can I properly embed it so that the code will work. Thanks!
<form>
<div class="form-group">
<input type= class="form-control" id="exampleInputEmail1" placeholder="Enter Value">
</div>
</form>
You dont' need the whole input section, just do this :
<%= f.text_field :name , :class=> "form-control"%>
Just add bootstrap classes into your code via parameter :class
Use Formtastic Bootstrap it's a gem for rails, create forms with automatic bootstrap class
'f' is not instantiated in you code so following code will raise error in the form-
<%= f.text_field :name %>
alternatively you can use this -
<%= text_field_tag :name,'', :placeholder => "Enter Value", :class=>"form-control", :id=>"exampleInputEmail1" %>
this will not raise any error on embedding in the form.
I am using validates_acceptance_of :terms, :message => "must be accepted" in my user.rb model, and am using bootstrap-sass.
My check box code looks like this in the view:
<div class="control-group">
<%= f.label :terms, :class => "control-label" do %>
Accept <%= link_to('Terms of Use *', "#myTOUModal", :"data-toggle" => "modal") %>
<% end %>
<div class="controls">
<%= f.check_box :terms %>
</div>
</div>
For some reason, when the terms check box isn't selected on form submission, the appropriate error message shows up at the top of the form, but there is a problem with the field_with_errors div class wrapping around the check box label.
The HTML for the rendered page looks like this:
<div class="control-group">
<label class="control-label" for="user_terms">
Accept Terms of Use *
</label>
<div class="controls">
<input name="user[terms]" type="hidden" value="0" />
<div class="field_with_errors">
<input id="user_terms" name="user[terms]" type="checkbox" value="1" />
</div>
</div>
</div>
The result is that the check box field label isn't highlighted on error. Is there a way to force the div tag placement for the field_with_errors class to show up just after the <div class="control-group"> tag? Why does using a block to define a field label throw off the field_with_errors tag placement? Does anyone have experience with this?
Thank you
This is a bug i think. The problem is in block. Define your label without block and everything works.
Try something like:
<% modal_html = capture do >
Accept <%= link_to('Terms of Use *', "#myTOUModal", :"data-toggle" => "modal") %>
<% end %>
<%= f.label :terms, modal_html, :class => "control-label" %>
Or helper:
def modal_html
#Q{Accept #{link_to('Terms of Use *', "#myTOUModal", :"data-toggle" => "modal")} }.html_safe
end
I'm working on a mobile web app using Rails and jQuery Mobile. I've got a rails model called 'Event' and the corresponding controller and view (generated via scafolding). Now I'm working on the creation of a new Event using a form that has been generated. I'd like to slightly change this form but still be compatible with the rails model.
Here's how it looks now:
<%= form_for(#event) do |f| %>
<div class="field">
<%= f.label :priority %><br />
<%= f.number_field :priority %>
</div>
<div class="actions">
<%= f.submit %>
</div>
<% end %>
The scafolded view is using some kind of default helper class I guess. But I'd like to change the f.number_field to a jQuery mobile slider which looks like this in html:
<label for="slider-1">Input slider:</label>
<input type="range" name="slider-1" id="slider-1" value="60" min="0" max="100" />
Now, how do I combine the rails model with the jQuery slider, so that when the user clicks submit the clips_controller receives a clip model which contains the priority which has been adjusted using the slider?
Thank you in advance!
You can use range_field helper method
Instead of this:
<%= f.number_field :priority %>
Use this:
<%= f.range_field :priority, :min => 0, :max => 100 %>
When I try to create a category by using Ajax I get a strange behavior with my error message.
Right now I have my error message appearing like this:
My create.js.erb and new.js.erb both have the same code which is just this line:
$(".cc-form").html("<%= escape_javascript(render(:partial => 'categories/form', locals: { category: #category })) %>");
This is my category form:
<%= form_for(#category, :remote => true, :html => { :class => "add-form", :id => "cform" }) do |f| %>
<fieldset>
<p>
<%= f.label :name, "Category Name *" %>
<br />
<%= f.text_field :name %>
</p>
<div class="form-actions">
<%= f.submit "Create" %>
</div>
</fieldset>
Here is the code to enable custom error HTML:
# application.rb
ActionView::Base.field_error_proc = Proc.new do |html_tag, instance|
errors = Array(instance.error_message).join(',')
%(#{html_tag}<span class="validation-error"> #{errors}</span>).html_safe
end
Then the HTML itself along with the error HTML:
<p>
<label for="category_name">Category Name *</label><span class="validation-error"> can't be blank</span>
<br>
<input id="category_name" name="category[name]" size="30" type="text" value=""><span class="validation-error"> can't be blank</span>
</p>
I only want the error message next to the label and not the right side of the input. How would I do this? The format is tricky for me when I look at it.
Thanks.
I guess you use field_error_proc badly, because it's good to wrap the input field into element with special class. Field_error_proc tags both the label and input tag with field_with_error by default since the refered object (:name that means category.name having the errors array) is the same. It's not a defect, because it's good for changing your label's color to red in this case. I checked the Rails code (actionpack/lib/action_view/helpers/tags/label.rb) and you can't turn this behavior off for labels (it can be a feature request), so I guess there's only one solution for your problem if you use plain html for labels.
I have two solutions now for your problem:
Instead of
<%= f.label :name, "Category Name *" %>
use
<label for="category_name">Category Name *</label>
in your view.
It's not too nice, but you can use f.label if you make form .label .validation-error { display: none } in your stylesheet file. I know it's just a workaround, but if f.label is necessary, then I don't know better solution.
You have two of these <span> tags in the page:
<span class="validation-error"> can't be blank</span>
EDIT:
Okay, it looks like both the label and the input need to be wrapped with a custom error. Here are a couple of links:
http://stackoverflow.com/questions/5267998/rails-3-field-with-errors-wrapper-changes-the-page-appearance-how-to-avoid-t
https://gist.github.com/1464315