I'm trying to create a form with some custom data attributes on the inputs:
<input type="text" data-family="Dinosaurs">
This seemed like a nice clean way to have easy front-end access (haha!) with jquery:
$("[data-family='Dinosaurs']").doSomething()
The problem is I can't get Rails (3.0.3) to render the attribute.
<%= f.text_field :question, :id=>"poll_question", :class=>"BigInput", :style=>"width:98%;", :attributes=>"data-submit_clear='1'" %>
I've tried many permutations to no avail and can't find an example of how to do this. Do I need to modify the text_field helper to support any custom attributes?
Oops. It's just
<%= f.text_field :question, :id=>"poll_question", :class=>"BigInput", :style=>"width:98%;", 'data-submit_clear'=>'1' %>
Rails >3.1 has a handy shortcut for data-attributes like this which most HTML-generating helpers support:
<%= f.text_field :question, :data => { :submit_clear => '1' } %>
It can make things more readable when you have a couple of data attributes, e.g.:
<%= f.text_field :question, :data => { :submit_clear => '1', :more_info => 'Ok', :also => 'this' } %>
Related
I need to add a data attribute to an f.association input in a simple form. To do this I found this article and subsequent reference to simpleform's documentation. It is easy enough to add classes with the standard syntax, I am wondering why it's proving difficult using a wrapper.
So rather than the standard:
<%= f.association :size, input_html:{class: 'sku-suffix-component'} %>
I am using:
<%= f.input :size, as: :select, input_html:{class: 'sku-suffix-component'} do %>
<%= f.select :size, Size.all.map{ |s| [s.name, s.id, {'data-code-num' => s.code_num}] } %>
<% end %>
Much to my frustration, the added class is nowhere in the <select> tag (not to mention the missing other default classes and id naming convention [id="product_size_id" becomes id="product_size"]). I have tried various syntaxes and placements of the input_html hash.
Below you can see the difference in appearance etc. On the right is using the standard syntax.
And here is the resulting html:
<select name="product[size]" id="product_size"> (...)
Compared with:
<select class="form-control select required sku-suffix-component" name="product[color_id]" id="product_color_id"> (...)
Try this solution and if it is possible than create some link for jsfiddle so we can test and try to find solution
<%= f.input :size do %>
<%= f.select :size, Size.all.map { |s| [s.name, s.id, { class: 'sku-suffix-component', 'data-code-num' => s.code_num }]}, input_html: { class: 'sku-suffix-component' }, include_blank: true %>
<% end %>
I found the solution combining strategies that I found on separate posts.
The long and the short of it was to utilize the map method but not within a custom input wrapper.
<%= f.association :size, collection: Size.all.map{ |s| [s.name, s.id, {'data-code-num' => s.code_num}]}, input_html:{class: 'sku-suffix-component'} %>
This nets perfectly my desired <select> with an added class, and the <option>'s with a custom data- attribute.
<select class="form-control select required sku-suffix-component" name="product[size_id]" id="product_size_id">
<option value=""></option>
<option data-code-num="001" value="113">onesize</option>
(...)
I'm using simple_form in Rails 4, and I was using an input that I then passed data attributes to like so:
<%= f.input :url, :input_html => {"data-toggle" => "tooltip", :title => "My tooltip"} %>
and it worked as expected, creating tags like:
<input data-toggle="tooltip" data-original-title="My tooltip">
Now, however, I need to use simple_form's input_field so I can have more control over the display, but it doesn't seem to accept the input_html argument. My code looks like:
<%= f.input_field :url, :input_html => {"data-toggle" => "tooltip", :title => "My tooltip"} %>
and it results in:
<input html="{:data=>{"data-toggle"=>"tooltip", :title=>"My tooltip"}}">
Which is clearly suboptimal (I stripped other irrelevant properties and attributes to simplify). Any ideas on how to make this work?
Looking at the code for SimpleForm::FormBuilder#input_field, it appears that all options passed in are treated as if they were under :input_html.
Try removing :input_html and just passing the options directly:
<%= f.input_field :url, "data-toggle" => "tooltip", :title => "My tooltip" %>
i am new to rails and try to do the following:
I would like, because i use Bootstrap, to have a partial for a input field, with it's label and a little icon i called symbol in this case.
Here is my view:
<%= form_for(#user, :class => "form-horizontal" ) do |f| %>
<fieldset>
<%= render 'shared/text_field', function: f, tag: :name, symbol: '<i class="icon-user"></i>' %>
<%= render 'shared/text_field', function: f, tag: :email, symbol: "#" %>
<%= render 'shared/password_field', function: f, tag: :password, symbol: '<i class="icon-log"></i>' %>
<%= render 'shared/password_field', function: f, tag: :password_confirmation, alt: "Passwort wiederholen", symbol: '<i class="icon-log"></i>' %>
<!-- SUBMIT -->
<%= f.submit "Anmeldung", :class => "btn btn-primary" %>
</fieldset>
<% end %>
Here a subpartial for normal input fields:
<%= render 'shared/bootstrap/input_field' %>
<% content_for :label do %>
<%= function.label tag, :class => "control-label", :for => "prependedInput" %>
<% end %>
<%content_for :symbol do %>
<%= raw(symbol) %>
<% end %>
<% content_for :field do %>
<%= function.text_field tag, :class => "input-xlarge", :id => "prependedInput", :size => "6" %>
<% end %>
(there is also a subpartial for password fields, basicly exchanging function.text_field with function.input_field)
And here is the input_field which is rendered:
<div class="control-group">
<%= yield :label %>
<div class="controls">
<div class="input-prepend">
<span class="add-on"><%= yield :symbol %> </span>
<%= yield :field %>
</div>
</div>
</div>
So my question is: how can i solve this Problem in a nice and easy way (this things happend while refactoring and it got even worse then better) and how can i make it work, because by now something like this happens: http://pastebin.com/bNsgT9AR so yield puts with each content_for the content and the content before into the place (except the last one)
It would be great to hear nice solutions from you, there has to be a so much nicer way as almost always in Rails.
Greetings form Germany ;)
As the author of The Rails View, I agree with Ben Taitelbaum's post on this and say that Formtastic is totally a great option for this kind of complexity.
With regards to the code you posted, as developers we want to avoid that kind of view writing across the board, as it ends up an unmanageable mess. There's too many files involved in editing a form, and at some point, some other dev will come in and overwrite our shared partial, not knowing where else it was used, to change the way a different form behaves. Any benefit of code reuse that we can get out of this kind of abstraction is completely obliterated by the potential for it to go sour very quickly with mutliple developers.
While Formtastic is great, I've also been using SimpleForm a lot in my recent apps, especially when I don't need the full power of Formtastic.
SimpleForm will handle your label, and it also supports i18n as well. With this it would be:
<%= simple_form_for #user do |f| %>
<%= f.input :name, :input_html => { :class => 'user-icon' } %>
<%= f.input :email %>
<%= f.input :password, :as => :password, :input_html => { :class => 'log-icon' } %>
<%= f.input :password_confirmation, :as => :password, :input_html => { :class => 'log-icon' } %>
<%= f.button :submit %>
<% end %>
Then in your I18n file, you can have:
en:
simple_form:
labels:
user:
username: 'User name'
password: 'Password'
password_confirmation: 'Password confirmation'
de:
simple_form:
labels:
user:
username: 'Benutzername'
password: 'Passwort'
password_confirmation: 'Passwort wiederholen'
And more as you need it. You can define your hints and placeholders in the i18n file as well.
Also, think about adding the icon as a CSS pseudo class :after, and do so for each class that you need to add in the code)
input.user-icon:after {
// image as background, positioned properly, etc etc
}
input.log-icon:after {
// image as background, positioned properly, etc etc
}
And that way, you can remove this kind of stuff from your ERB/HTML and put it where it belongs: In the CSS (presentation layer).
There's a great section on forms in The Rails View, where they recommend using FormBuilders for this type of thing (they also discuss formtastic, which is worth checking out).
The biggest lesson I got out of this book (and I can't recommend it enough!) is that it's important to keep views as simple as possible, since they tend to be the least fun part of a rails app to debug, especially as the app grows large. So from this perspective, I would want the view to be nice and simple, something like:
<%= semantic_form_for(#user) do |f| %>
<%= f.inputs do %>
<%= f.input :name, class: 'icon-user' %>
<%= f.input :email %>
<%= f.input :password %>
<%= f.input :password_confirmation %>
<% end %>
<%= f.buttons %>
<% end %>
Start with a nice readable view as the goal, and add the necessary helpers and formbuilders as needed for custom field types.
I'd recommend using I18n for setting the submit button text to be "Anmeldung" instead of hardcoding that as well.
I haven't used it, but you might want to check out formtastic-bootstrap for getting the integration you want..
I feel that's a bit too much generalization overhead for a simple input field.
Have you considered simply creating one shared input field partial and just passing in the field name (you named it tag) and the type of field (text_field or password_field) as parameters? I can see that your approach might be more general, but if you just need those two options for now, keep it as simple as possible.
Addition in reply to comment:
You can simply pass parameters to your partial like so:
<%= render 'shared/error_messages', object: f.object %>
And then use the the variables in your partial. in your case you could
<%= render 'shared/bootstrap/input_field', function: f, tag: :name, input_field_type: :text_field %>
and then in _input_field.html.erb
<div class="control-group">
<%= function.label tag, :class => "control-label", :for => "prependedInput" %>
...
Using Rails 3 with Twitter Bootstrap and Simple_form, I am having issues changing the length of the input box in this field:
<div class="input-prepend input-append">
<%= f.input :price, :wrapper => :append do %>
<span class="add-on">$</span>
<%= f.input_field :price %>
<span class="add-on">.00</span>
<% end %>
</div>
Others say to add this after the :price variable:
:input_html => {:size => 15}
The 'do' loop seems to change the rules, any suggestions?
try
:style => "width: 100px;"
Twitter bootstrap has css classes for this. Depending on what size you want you can add class input-min, input-small, input-large and so on. You can also use the span classes, e.g. span1, span2, etc.
<div class="input-prepend input-append">
<%= f.input :price, :wrapper => :append do %>
<span class="add-on">$</span>
<%= f.input_field :price, :class => 'input-medium' %>
<span class="add-on">.00</span>
<% end %>
</div>
I am using the f.input form to create controls with labels in a :class => 'form-horizontal' form, using a class attribute or style attribute (directly or as a hash, any way I tried) didn't work for me, and had zero effect on the generated HTML.
This is what worked for me:
<%= f.input :description, input_html: { class: 'span12' } %>
This works with both the Bootstrap column layout classes ('span1', 'span2', etc,) the input sizing classes ('input-large', 'input-xxlarge', etc,) or whatever custom class you want. The trick is using the input_html key. You can also mess with the label using the label_html key but that's likely to mess up the form-horizontal layout.
It looks like the size key in :input_html => {**:size** => 15} is ignored by SimpleForm... when I tired this it did not affect the HTML output.
I found this here in the SimpleForm docs:
https://github.com/plataformatec/simple_form#usage
I would like to be able to use the token fields (found here: http://railscasts.com/episodes/258-token-fields) with formtastic to allow users to input tags (I am using acts_as_taggable_on).
Can someone walk me through an example of how to do this?
I don't have the time for a full walk-through, but the guts of this seems to be that a text_field has a data-pre attribute with some JSON in it. The way to add attributes to inputs in Formtastic is via the :input_html option, so this:
<p>
<%= f.label :author_tokens, "Authors" %><br />
<%= f.text_field :author_tokens, "data-pre" => #book.authors.map(&:attributes).to_json %>
</p>
Might be translated to something like:
<%= f.input :author_tokens, :input_html => { "data-pre" => #book.authors.map(&:attributes).to_json } %>
The rest is gluing CSS to HTML and finding the right DOM element to apply the jQuery to (view source is your friend).