Good morning. I'm a newbie in Ruby and I'm stuck in a little problem.
In a form, I want to make a selection of categories. Categories can be inserted by the users, so the selection have to be dynamic.
I've tried like this:
<div class="input-field">
<select class="multiple">
<%= f.select :category, Category.all.collect {|x| [x.name, x.id]} %>
</select>
</div>
It works, but on chrome console, look like this:
<div class="input-field">
<select class="multiple"></select>
<option value="2">Pastasciutta</option>
<option value="3">Vegetariano</option>
</div>
The category ID was correctly used as value and the list is correctly shown. But, as you see, the "option" is out of the "select" tag. Can you explain me why? And how can I solve this issue?
That list is only shown as a list, but I want to flag and unflag x categories.
My version of Ruby -> 2.3.1
----EDIT----
_form.html.erb
<%= form_for(recipe) do |f| %>
<% if recipe.errors.any? %>
<div id="error_explanation">
<h2><%= pluralize(recipe.errors.count, "error") %> prohibited this recipe from being saved:</h2>
<ul>
<% recipe.errors.full_messages.each do |message| %>
<li><%= message %></li>
<% end %>
</ul>
</div>
<% end %>
<div class="field">
<%= f.label :name %>
<%= f.text_field :name %>
</div>
<div class="field">
<%= f.label :time %>
<%= f.number_field :time %>
</div>
<div class="field">
<%= f.label :price %>
<%= f.text_field :price %>
</div>
<div class="field">
<%= f.label :recipe %>
<%= f.text_area :recipe %>
</div>
<div class="input-field">
<%= f.select :category, Category.all.collect {|x| [x.name, x.id]}, {}, class: "multiple" %>
</div>
<br>
<div class="actions">
<%= f.submit %>
</div>
<% end %>
And that's what is rendered:
http://prnt.sc/cfqmp6
The line:
<%= f.select :category, Category.all.collect {|x| [x.name, x.id]} %>
Is already rendering the <select> tag part of the element, you are duplicating this element by placing the above line inside another <select>. Change this:
<select class="multiple">
<%= f.select :category, Category.all.collect {|x| [x.name, x.id]} %>
</select>
To this:
<%= f.select :category, Category.all.collect {|x| [x.name, x.id]}, {}, class: "multiple" %>
The last two arguments are the options and html_options to the select tag. See: http://api.rubyonrails.org/classes/ActionView/Helpers/FormBuilder.html#method-i-select
Related
I've just started learning ruby on rails recently.
I've login form like this,
<div class="row">
<div class="col-md-12">
<div class="col-md-4">
<div class="field">
<%= label_tag :email %><br />
<%= text_field_tag :email, params[:email], :class => 'form-control' %>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="col-md-4">
<div class="field">
<%= label_tag :password %><br />
<%= password_field_tag :password, :class =>'form-control' %>
</div>
</div>
</div>
</div>
I'm just trying to add bootstrap class form-control to email and password field but some thing went wrong, class value appeared at input field of password.
And I've got view like this,
The question might be stupid, any help suggestion is appreciated.
According to the documentation, the second parameter of password_field_tag method is value, so you should set it in order to set third parameter, where you can set the class:
<%= password_field_tag :password, nil, class: 'form-control' %>
For some reason when executing this code, the radio buttons that get created aren't mutually exclusive in getting picked. How do I make it so that users can only pick 1 radio button? This code is essentially going through a variety of addresses and allowing a user to pick an address for their order.
<div class="select-address select-address-row" style="display:none">
<% #order.user.addresses.each do |address, index| %>
<%= form_for #order, remote: true, :html => { :id => 'address-form-'+address.id.to_s} do |a| %>
<div class="col-xs-4 select-address-col">
<div class="enterprise-buy-address-box address-<%= address.id %>">
<%= address.shipping_name %><br>
<%= address.line_1 %><br>
<%= address.city %>, <%= address.state %> <%= address.zipcode %><br>
<% isDefault = address.shipping_name == #defaultAddress.shipping_name ? true : false %>
<%= a.radio_button :pickedAddress, 'Address', :checked => isDefault %>
<%= label :pickedAddress, '' %>
<div class="submit-address">
<%= button_tag(type: 'submit', class: "btn btn-xs btn-default address-custom-button-select address-"+address.id.to_s+"-button") do %>
select
<% end %>
</div>
</div>
</div>
<%= a.hidden_field :address_id, :value => address.id %>
<% end %>
<script>
$('.address-<%=address.id%>-button').click(function() {
$('.default-address').empty();
var selectedAddress = $('.address-<%=address.id%>').clone();
selectedAddress.find('.submit-address').remove();
$('.default-address').append(selectedAddress);
$('default-address').addClass("enterprise-buy-address-box");
$('.default-address').show();
$('.select-address').toggle();
$('.change-address-link').toggle();
});
</script>
<% end %>
</div>
Your form_for tag is inside of the loop for the addresses. Even if the name attribute is the same for all of your input type="radio" elements, they will not be mutually exclusive across different form elements. Move your form_for tag outside of the loop so that the radio inputs belong to the same form.
See the following snippet for demonstration:
<p>These won't work</p>
<form>
<input type="radio" name="foo">
</form>
<form>
<input type="radio" name="foo">
</form>
<p>These do work</p>
<form>
<input type="radio" name="bar">
<input type="radio" name="bar">
</form>
I'm building a form in ROR and I'd like to use a bootstrap validation state on the text_field but I'm unsure of how to implement the feature? I'm not great with bootstrap so I thought I see if I could get help on here. I'll show my form and my code for clarity.
FORM
<label>
Name<br>
<div class="form-group has-error has-feedback">
<%= f.text_field :name %>
</div>
</label>
Here I have already placed the div class around the text_field but how does bootstrap know when a validation is wrong and turn the text field red? Im trying to implement this
<div class="form-group has-error has-feedback">
<label class="control-label" for="inputError2">Input with error</label>
<input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
<span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
<span id="inputError2Status" class="sr-only">(error)</span>
</div>
this is in the bootstrap docs but I'm not sure how to make it work in my app
I want the text field to look like this when name is blank.
I hope this is enough info?
Put your errors in your app/views/layouts/application.html.erb, above the yield and under your nav.
<% if flash[:notice] %>
<div class="alert alert-success">
<button type="button" class="close" data-dismiss="alert">×</button>
<%= flash[:notice] %>
</div>
<% elsif flash[:error] %>
<div class="alert alert-danger">
<button type="button" class="close" data-dismiss="alert">×</button>
<%= flash[:error] %>
</div>
<% elsif flash[:alert] %>
<div class="alert alert-warning">
<button type="button" class="close" data-dismiss="alert">×</button>
<%= flash[:alert] %>
</div>
<% end %>
within your model, validate the form
validates :title, length: { minimum: 5 }, presence: true
within app/helpers/application_helper.rb
def form_group_tag(errors, &block)
if errors.any?
content_tag :div, capture(&block), class: 'form-group has-error'
else
content_tag :div, capture(&block), class: 'form-group'
end
end
within your form
<% if post.errors.any? %>
<div class="alert alert-danger">
<h4>There are <%= pluralize(post.errors.count, "error") %>.</h4>
<ul>
<% post.errors.full_messages.each do |msg| %>
<li><%= msg %></li>
<% end %>
</ul>
</div>
<% end %>
<%= form_group_tag(post.errors[:title]) do %>
<%= f.label :title %>
<%= f.text_field :title, class: 'form-control', placeholder: "Enter post title" %>
<% end %>
<%= form_group_tag(post.errors[:body]) do %>
<%= f.label :body %>
<%= f.text_area :body, rows: 8, class: 'form-control', placeholder: "Enter post body" %>
<% end %>
<div class="form-group">
<%= f.submit "Save", class: 'btn btn-success' %>
</div>
<% end %>
make sure you have the proper logic in your controller too
if #book.save
format.html { redirect_to #book, notice: 'Book was successfully created.' }
format.json { render :show, status: :created, location: #book }
else
format.html { render :new }
format.json { render json: #book.errors, status: :unprocessable_entity }
end
This example here might be helpful: http://formvalidation.io/examples/adding-warning-validation-state/
In Rails the easyest way to do it is using te gem bootstrap_form
after install it you can use it like this
<%= bootstrap_form_for(#user) do |f| %>
<%= f.text_field :name %>
<%= f.submit "Log In" %>
<% end %>
hope this helps
<CENTER><h4><%=question.quest %> </h4></CENTER>
<tr><center><%= f.label "option1" %></center></tr>
<tr><center><%= f.radio_button :answer,"1" %></center></tr>
<td><center><%= f.label "option2" %></td>
<td><%= f.radio_button :answer,"2" %></center></td>
<tr><center><%= f.label "option3" %>
<%= f.radio_button :answer,"3" %></center></tr>
<tr><center><%= f.label "option4" %>
<%= f.radio_button :answer,"4" %></center></tr>
<tr><center><%= f.label "option5" %>
<%= f.radio_button :answer,"5" %></center></tr>
<% end %>
<% #questions.each do |question| %>
<CENTER><% question.option1.split(" ").each do |option1| %>
<radio name="question_<%=question.id%>" value=""  ><%=option1 %> </radio>
<CENTER><% question.option2.split(" ").each do |option2| %>
<radio name="question_<%=question.id%>" value=""  ><%=option2 %> </radio>
<CENTER><% question.option3.split(" ").each do |option3| %>
<radio name="question_<%=question.id%>" value=""  ><%=option3 %> </radio>
<CENTER><% question.option4.split(" ").each do |option4| %>
<radio name="question_<%=question.id%>" value=""  ><%=option4 %> </radio>
<CENTER><% question.option5.split(" ").each do |option5| %>
<radio name="question_<%=question.id%>" value=""  ><%=option5 %> </radio>
<% end %>
<% end %>
<% end %>
<% end %>
<% end %>
<% end %>
<center><p><%= f.button :submit%></p></center>
Thank you for completing these questions!
My issue is there are 2 questions with 5 options..In 1st question i will click radio button and when i click the second question radio button means the 1st question radio button is going..
I'm not sure if I understood you correctly but radio_button description in RoR guide say that:
"1.3.2 Radio Buttons
Radio buttons, while similar to checkboxes, are controls that specify a set of options in which they are mutually exclusive (i.e., the user can only pick one):"
In this case user can select only one option.
Maybe check_box fields will be solution in this case?
please check: http://guides.rubyonrails.org/form_helpers.html
I want to get focus to the text field on mouseover. How to do this? Now my code lookd like this
<div class='label_input'>
<%= f.label :username %>
<%= f.text_field :username %>
<div class='clearfix'></div>
</div>
Expecting similar to the HTML code
<input type="text" onmouseover="this.focus()"></input>
You could pass an onmouseover to text_field (docs).
Sometimes I just skip the erb and write the html
You can try:
<div class='label_input'>
<%= f.label :username %>
<input id="user_name" name="user[name]" size="30" type="text" onmouseover="this.focus()"></input>
<div class='clearfix'></div>
</div>
I find that in some cases the rails view helpers get more cumbersome than html. So, use what's most easy.
This way is really helpfull when you update select boxes with javascript.
<div class='label_input'>
<%= f.label :username %>
<%= f.text_field :username, onmouseover: "this.focus()" %>
<div class='clearfix'></div>
</div>