I'm creating a form using the simple_form gem on Rails 3.2.
The problem I'm having is that I wish to add a font-awesome icon to the f.button :submit line of my form. Since the output is of type input I can't embed the icon element inside of it.
I could simply hardcode a submit button into the form that contains the icon but I am not sure how to fetch the button value - Create %model/Update %model.
My code is posted below:
<div id="form">
<%= simple_form_for #program, :html => { :class => 'form-horizontal' } do |f| %>
<%= f.input :name %>
<%= f.input :url %>
<%= f.input :description, :input_html => { :class => "span5", :rows => 10 } %>
*********************
<%= f.button :submit do %>
<i class="icon-save"></i> What Here??? <--- Doesn't work since output is type input
<% end %>
*********************
<button class="btn">
<i class="icon-save"></i> <%= f.button(:submit).label %> <--- Doesn't work, alternative?
</button>
<% end %>
</div>
Expected output:
<button type="submit" class="btn">
<i class="icon-plus-sign"></i> Create *ModelName*
</button>
Or Update ModelName, depending on controller action.
<%= f.button do %>
<i class="icon-save"></i> <%= "#{f.object.new_record? ? 'Create' : 'Update'} #{f.object.class.model_name.human}" %>
<% end %>
It would be better to make some helper method for this. If you want to use I18n take a look at source code (button and submit_default_value methods, lines 1763 and 1776). It's pretty clear.
Related
I am using the datetimepicker-rails gem (https://github.com/zpaulovics/datetimepicker-rails)
I would like to have a simple timepicker, but datepicker is always present.
I tried with using the "format" option, the "pickDate: false" option but it is still there.
What am I doing wrong?
Here is the sample of my view:
<%= simple_form_for(#hour, html: {class: 'form-inline'}, remote: true) do |f| %>
<%= f.error_notification %>
<div class="row form-inputs">
<%= f.input :start_time, as: :time_picker, autocomplete: :off %>
<%= f.input :end_time, as: :time_picker, autocomplete: :off %>
</div>
<div class="form-buttons">
<%= f.button :submit, "Zapisz", class: "btn btn-primary" %>
<%= link_to '<button type="button" class="btn btn-primary" title="Wstecz">Wstecz</button>'.html_safe, hours_path %>
</div>
<% end %>
and in coffee script I have
$(document).ready -> $('.time_picker').datetimepicker XXX
where XXX was one of the options I tried: format: "H:i", format: "LT" or pickDate:false.
Thank you in advance for your help.
Regards,
Paulina
I think I saw this in
http://eonasdan.github.io/bootstrap-datetimepicker/#bootstrap-3-datepicker-v4-docs
In the Custom Format part.
I have two models: Meal and Tag. They are associated by HABTM. What I want to do is to add new meal. So I have new.html where is name field, preparation field, and all tags (represented by toggle-buttons - every tag has own toggle-button). User can clicked tags, which want to save in this meal.
And here is a problem. I can display all tags, but I have no idea how can I tell rails to save only clicked tags.
Could you help me find right approach?
oh, and there is a user too (user has many meals), but I thing it doesn't matter.
Here is my view:
<%= form_for(#meal,:html => {:class => "meal-data-form"}) do |f| %>
<%= render 'shared/error_messages', object: f.object%>
<%= f.label :name, "Nazwa *" %>
<%= f.text_field :name, class: 'form-control'%>
<%= f.label :preparation, "Sposób przyrządzenia" %>
<%= f.text_area :preparation, class: 'form-control' %>
<h3>Określ tagi dla tego posiłku</h3>
<div id="tags-associated-with-meal">
<h4>Rodzaj posiłku</h4>
<div id="associated-nutrient-tags">
<% current_user.nutrient_tags.each do |nutrient_tag| %>
<button id="associated-type-tag-<%= nutrient_tag.id %>" type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
<%= nutrient_tag.name %>
</button>
<% end %>
</div>
</div>
<%= f.submit yield(:button_name), class: "btn btn-primary" %>
I would not use a toggle button to do this, I would probably use checkboxes.
This is what you would do if you used checkboxes:
<%= f.collection_check_boxes :nutrient_tags_ids, current_user.nutrient_tags, :id, :name do |b| %>
<div class="collection-check-box">
<%= b.check_box %>
<%= b.label %>
</div>
Here is something for reference: http://www.sitepoint.com/save-multiple-checkbox-values-database-rails/
And here is the Rails collection_check_boxes official documentation: http://apidock.com/rails/v4.0.2/ActionView/Helpers/FormOptionsHelper/collection_check_boxes
Hope that helps.
I have created this form in rails using simple form with bootstrap:
<%= simple_form_for #page, :html => { :class => 'page-form' } do |f| %>
<div class="row">
<%= f.input :title, wrapper_html: { class: 'span6'} %>
<%= f.input :url, wrapper_html: { class: 'span3'} %>
<%= f.input :content, input_html: { class: 'wysihtml5 span9' }, wrapper_html: { class: 'span9 row' } %>
<%= f.input :excerpt, input_html: { class: 'wysihtml5 span9 excerpt' }, wrapper_html: { class: 'span9 row'} %>
</div>
<% content_for :sidebar do %>
<div class="page-header">
<h1>Publish</h1>
</div>
<div class="well">
<%= f.input :status , collection: Page::STATUS.map { |s| [s.humanize, s] }, prompt: '- Select page status -' %>
<div class="form-actions">
<%= f.button :submit, :class => 'btn btn-primary' %>
<%= link_to t('.cancel', :default => t("helpers.links.cancel")),
pages_path, :class => 'btn' %>
</div>
</div>
<% end %>
<% end %>
The problem is that when the submit button is inside the content_for block it does not update the form when clicked. If i have the button outside this block it works.
Is there any way to make it work inside to content_for block? i need it to be in the side bar.
Picture of desired result:
Any tips, answers or helpful comments are appreciated :)
I found the answer my self.
By putting the form elements into the sidebar rails of course rendered the form field outside the form tag. (at the bottom of the page where the rest of the sidebar is rendered through the application layout).
This causes the form field to be unattached to the form.
My solution was to drop the content_for block and just handeling the sidebar in the form partial for this case.
I have a boolean to make comments public or private.
The boolean is a column in submissions and I have it working in a clumsy way right now and would like to eliminate the checkbox from the form, replacing with a hidden field, so that all the user sees is the submit button, conditional based on the boolean state:
submissions#show:
<% if #submission.comment_show == true %>
<%= render "hide_comment_form" %>
<%= render "comments/comment" %>
<% else %>
<%= render "show_comment_form" %>
</div>
<% end %>
_show_comment_form
<%= simple_form_for [#contest, #submission] do |f| %>
<div>
<%= f.input :comment_show, label: false %>
<%= hidden_field_tag :contest_id, #contest.id %>
<%= f.submit "Make Comments Public", :class => 'btn btn-mini' %>
</div>
<% end %>
_hide_comment_form
<%= simple_form_for [#contest, #submission] do |f| %>
<div class ="">
<%= f.input :comment_show, label: false %>
<%= hidden_field_tag :contest_id, #contest.id %>
<%= f.submit "Make Comments Private", :class => 'btn btn-mini' %>
</div>
<% end %>
I have tried hidden_field_tag, but haven't had any luck getting it to work.
Also, I've seen some fancier methods and routing to accomplish the same thing:
http://buckybits.blogspot.com/2011/09/simple-ajax-property-toggle-in-rails-30.html
But I would prefer to use a hidden field and conditionals to keep it simple.
Is it possible to use a hidden field to set a boolean in a form or do I have to go with a custom method and routing?
See the answer to this SO question: rails simple_form - hidden field - create?
Since you are using simple form, you can do something like this:
f.input :contest_id, :as => :hidden, :input_html => { :value => #contest.id }
I have started using Simple-form and Bootstrap and I have tried to follow this reference: Simple form + Bootstrap but I don't know what is going on because when a field is failing, here is what happens:
Regarding this screenshot I have a question:
1) As you see, the Price field is not being red surrounded. How can I do that?
Here is my code for the form:
<%= simple_form_for #lesson, :html => { :class => 'well' } do |lesson_form| %>
<% if lesson_form.error_notification %>
<div class="alert alert-error fade in">
<a class="close" data-dismiss="alert" href="#">×</a>
<%= lesson_form.error_notification %>
</div>
<% end %>
<%= lesson_form.input :title %>
<%= lesson_form.input :category %>
<%= lesson_form.input :description %>
<%= lesson_form.input :price %>
<%= lesson_form.button :submit, :label => 'Create', :class => 'btn btn-primary btn-large' %>
<% end -%>
I believe the code in your reference is somewhat misleading and incorrect insofar as error notifications go.
Change:
<% if lesson_form.error_notification %>
<div class="alert alert-error fade in">
<a class="close" data-dismiss="alert" href="#">×</a>
<%= lesson_form.error_notification %>
</div>
<% end %>
to, simply:
<%= lesson_form.error_notification %>
Then, in config/locals/simple_form.en.yml, change default_message to:
default_message: '<a class="close" data-dismiss="alert">×</a>Some errors were found, please take a look:'
This will fix the asymmetry in the error alert box (by fixing the resultant markup).
In order to troubleshoot the issue with your validation error not displaying in red, you'll have to share the markup so we can see what's going on.
Look at the text next to the price field. Simple for puts the errors next to the field.
To clean up your forms look trying the follow:
Remove this, its not needed with simple-form gem:
<% if lesson_form.error_notification %>
<div class="alert alert-error fade in">
<a class="close" data-dismiss="alert" href="#">×</a>
<%= lesson_form.error_notification %>
</div>
<% end %>
Change your :html => { :class => 'well' } to :html => { :class => 'well form-horizontal' }
This will layout your form better and apply bootstrap css to error fields and text.