I have simple form:
<%= simple_form_for #link do |f| %>
<%= f.input :url, placeholder: "http://..." %>
<%= f.button :submit, "Submit Link", class: "btn-primary" %>
<% end %>
it outputs input like this:
<div class="form-group url required link_url">
<label class="url required control-label" for="link_url">
<abbr title="required">*</abbr> Url
</label>
<input class="string url required form-control" placeholder="http://..." type="url" name="link[url]" id="link_url">
</div>
How can I add 'sr-only' class to label element?
Just do:
<%= f.input :url, placeholder: "http://...", label_html: { class: 'sr-only' } %>
Related
So I have this book edit page which contains unique fields(Title, ISBN). But before I submit the form to update, I need to send first the form information to another confirmation page and then update. But when I pass the form info to the confirmation page, the unique validations for Title and ISBN fails. I have this code:
book.rb
validates :title, presence: true,
uniqueness: true
validates :isbn, presence: true,
uniqueness: true,
format: { with: /[0-9]/ }
edit.html.erb
<%= form_for #book, url: confirm_edit_admin_book_path, method: :patch, html: { class: "form" } do |f| %>
<%= f.hidden_field :id %>
<div class="float-right">
<button class="btn btn-primary">Confirm</button>
</div>
<h4 class="card-title">Edit Book</h4>
<div class="form-group row mt-5">
<%= f.label :title, class: "col-md-2 col-form-label required" %>
<div class="col-md-10">
<%= f.text_field :title, class: "form-control" %>
<%= render "admin/shared/error_field", field: :title %>
</div>
</div>
<div class="form-group row">
<%= f.label :isbn, "ISBN", class: "col-md-2 col-form-label required" %>
<div class="col-md-10">
<%= f.text_field :isbn, class: 'col-sm-12 form-control' %>
<%= render "admin/shared/error_field", field: :isbn %>
</div>
</div>
<div class="form-group row">
<%= f.label :released_at, class: "col-md-2 col-form-label required" %>
<div class="col-md-10">
<%= f.date_field :released_at, class: 'col-sm-12 form-control' %>
<%= render "admin/shared/error_field", field: :released_at %>
</div>
</div>
<div class="form-group row">
<%= f.label :description, class: "col-md-2 col-form-label" %>
<div class="col-md-10">
<%= f.text_area :description, class: 'col-sm-12 form-control' %>
<%= render "admin/shared/error_field", field: :description %>
</div>
</div>
<div class="form-group row">
<%= f.label :quantity, class: "col-md-2 col-form-label required" %>
<div class="col-md-10">
<%= f.number_field :quantity, class: 'col-sm-12 form-control' %>
<%= render "admin/shared/error_field", field: :quantity %>
</div>
</div>
<div class="float-right">
<%= f.submit "Confirm", class: "btn cur-p btn-primary" %>
</div>
<% end %>
books_controller.rb
def confirm_edit
#book = Book.new(book_params)
book_info = Book.find(#book.id)
if #book.valid?
session[:book_update] = #book
else
render 'edit'
end
end
def update
#book = Book.find(params[:id])
#book.update_attributes(session[:book_update].compact)
session.delete(:book_update)
redirect_to admin_book_url
end
In the confirm_edit action you are creating a new instance of Book using the params from the update action, which are presumably the params from an existing book.
#book = Book.new(book_params)
You are then calling #book.valid? which is going to fail (unless you've changed the Title and ISBN) because a book with the same values is already in the database.
You could retrieve the book from the database and then use .assign_attributes to check validity that way perhaps?
def confirm_edit
#book = Book.find(params[:id])
#book.assign_attributes(book_params)
if #book.valid?
session[:book_update] = #book
else
render 'edit'
end
end
I have a User model and a Company model (amongst others) and an "Edit Profile" page with a form. One field of the form is to select a company from a list and save to the Users table in a column called "company_id", which is linked to the ID of each Company in the Companies table.
This all works great.
However, I would prefer to have a text field in which a user can start typing a company name and select a suggestion or create a new Company if theirs is not in the database.
I'm new to ruby and would like to know the best way to do this if anyone can help.
app\views\devise\registrations\edit.html.erb
<%= form_for(resource, as: resource_name, url: registration_path(resource_name), html: { method: :put }) do |f| %>
<div id="errorexplanationcontainer"><%= devise_error_messages! %></div>
<div class="mdl-textfield mdl-js-textfield">
<%= f.text_field :first_name, class: 'mdl-textfield__input', autofocus: true %>
<label class="mdl-textfield__label" for="first_name">First name</label>
</div>
<div class="mdl-textfield mdl-js-textfield">
<%= f.text_field :last_name, class: 'mdl-textfield__input' %>
<label class="mdl-textfield__label" for="last_name">Last name</label>
</div>
<!-- Company Field -->
<div class="field">
<%= f.label :company_id %>
<%= f.select :company_id, Company.all.collect {|company| [company.name, company.id]}, {:include_blank => "Select One"}, id: :job_company_id %>
</div>
<!-- End -->
<div class="mdl-textfield mdl-js-textfield">
<%= f.text_field :job_title, class: 'mdl-textfield__input' %>
<label class="mdl-textfield__label" for="job_title">Job Title</label>
</div>
<div class="mdl-textfield mdl-js-textfield">
<%= f.email_field :email, class: 'mdl-textfield__input' %>
<label class="mdl-textfield__label" for="email">Email</label>
</div>
<% if devise_mapping.confirmable? && resource.pending_reconfirmation? %>
<div>Currently waiting confirmation for: <%= resource.unconfirmed_email %></div>
<% end %>
<div class="mdl-textfield mdl-js-textfield">
<%= f.password_field :password, class: 'mdl-textfield__input', autocomplete: "off" %>
<label class="mdl-textfield__label" for="password">New password</label>
</div>
<div class="mdl-textfield mdl-js-textfield">
<%= f.password_field :password_confirmation, class: 'mdl-textfield__input', autocomplete: "off" %>
<label class="mdl-textfield__label" for="password_confirmation">Confirm password</label>
</div>
<button id="show-dialog" type="button" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
UPDATE
</button>
<dialog class="mdl-dialog">
<h4 class="mdl-dialog__title">Save Changes</h4>
Re-enter your password to save changes to your account.
<div class="mdl-textfield mdl-js-textfield">
<%= f.password_field :current_password, class: 'mdl-textfield__input', autocomplete: "off" %>
<label class="mdl-textfield__label" for="current_password">Current password</label>
</div>
<div class="mdl-dialog__actions">
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
<%= f.submit "UPDATE", class: 'hideinput' %>
</button>
<button type="button" class="mdl-button close">CANCEL</button>
</div>
</dialog>
<script>
var dialog = document.querySelector('dialog');
var showDialogButton = document.querySelector('#show-dialog');
if (! dialog.showModal) {
dialogPolyfill.registerDialog(dialog);
}
showDialogButton.addEventListener('click', function() {
dialog.showModal();
});
dialog.querySelector('.close').addEventListener('click', function() {
dialog.close();
});
</script>
<% end %>
I have used Twitter typeahead in on of my projects. It is pretty smooth and light, you just have to pass an array to it and it does the trick for you.
Some detailed documentation and examples are listed here: https://twitter.github.io/typeahead.js/examples/
Bundle install twitter-typeahead-rails
In your application.js, add the following line above require_tree:
//= require twitter/typeahead.min
In your controller, you can initialize the array:
#companies = Company.pluck(:name)
In your view:
<div id='search'>
<%= f.text_field :company, class: 'mdl-textfield__input' %>
</div>
Javascript:
var companies = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.whitespace,
queryTokenizer: Bloodhound.tokenizers.whitespace,
local: #{#companies},
});
$('#search .mdl-textfield__input').typeahead('destroy').typeahead({
hint: true,
highlight: true,
minLength: 2
},
{
source: companies
});
I'd like to apply bootstrap to the input fields as following.
<div class="input-group">
<span class="input-group-addon">Title</span>
<input type="text" class="form-control">
</div>
My current code is as following.
_form.html.erb
<%= simple_nested_form_for #event do |f| %>
<%= f.input :title %>
<%= f.input :description, input_html: { rows: 5, cols: 30 } %>
<%= f.input :charge_person %>
.
.
.
<% end %>
It would be appreciated if you could give me the best way in Rails.
This should do the trick:
<%= simple_nested_form_for #event do |f| %>
<div class="input-group">
<span class="input-group-addon">Title</span>
<%= f.input :title, class: 'form-control' %>
</div>
<div class="input-group">
<span class="input-group-addon">Description</span>
<%= f.input :description, class: 'form-control' %>
</div>
<div class="input-group">
<span class="input-group-addon">Charge Person</span>
<%= f.input :charge_person, class: 'form-control' %>
</div>
...
<% end %>
You shouldl read more detail SIMPLE FORM DOCS
<%= simple_nested_form_for #event, , wrapper_html: { class: 'input-group' } do |f| %>
<%= f.label :title, wrapper_html: { class: 'input-group-addon' } %>
<%= f.input_field :title, wrapper_html: { class: 'form-control' } %>
.
.
.
<% end %>
Friends , I have a model order that has many details. I am using the cocoon gem to generate forms . They render ok but are not saving . I click the button to save and nothing happens , and rails console shows nothing. The default edit form, called detail_fields saves with no problem. But i had to create this one called detail_fields_dev, and this one is not working. Can someone help?
routes.rb
resources :details
resources :orders
get '/orders/:id/devolucao' => 'orders#devolucao' , as: 'devolucao_order'
put '/orders/:id' => 'orders#update'
patch '/orders/:id' => 'orders#update'
orders_controller, is ok, using the default rails code. I created this action to call the detail_fields_dev form:
def devolucao
# #order = Order.find(params[:id])
end
The details params are ok too:
def order_params
params.require(:order).permit(:customer_id, :valor_total, :valor_total_dev, :item_total, :item_total_dev,:tipo,:descontado,:order_num, details_attributes: [:id,:order_id, :cod_produto, :desc_produto, :cod_cor, :desc_cor, :desc_tamanho,:preco,:quantidade,:quantidade_dev,:total, :total_dev,:barcode, :_destroy])
end
Order view:
_form_devolucao.html.erb
<%= simple_form_for(#order) do |f| %>
<%= f.error_notification %>
<div class="form-inputs form_fixed">
<%= f.input :customer, :as => :hidden %>
<%= f.input :tipo, :as => :hidden %>
<%= f.input :descontado, :as => :hidden %>
<%= f.input :valor_total, :as => :hidden %>
<%= f.input :item_total, :as => :hidden %>
<%= f.input :order_num, :as => :hidden %>
<div class="row">
<form action="#" method="post">
<div class="small-6 medium-3 columns leitor_dev">
Código de barras
(Leitor):
<input class = "cod_barras_dev" type="text" name="cod_barras_dev" value="" />
</div>
</form>
<div class="small-5 columns end not_found">
<span class="not_found">Produto não existe neste pedido!</span>
</div>
</div>
</div>
<div class="row">
<div class="small-12 columns">
<hr/>
<div id="details">
<%= f.simple_fields_for :details do |detail| %>
<%= render partial: "orders/detail_fields_dev", locals: {f: detail} %>
<% end %>
</div>
<hr/>
</div>
</div>
<div class="row">
<div class="small-12 columns">
<div class="form-actions container">
<%= link_to_add_association '+ ítens', f, :details, data: {"association-insertion-method" => :before, "association-insertion-node" => ".container " },:class => "button tiny radius add" %>
<br />
<br />
<br />
</div>
</div>
</div>
<div class="row">
<div class="small-6 medium-2 columns">
<%= f.button :submit, "Salvar" %>
</div>
<div class="small-6 medium-2 columns end">
<%= link_to 'Cancelar', orders_path, :class => "button alert"%>
</div>
</div>
<% end %>
And the partial orders/detail_fields_dev.html.erb
<div class="nested-fields">
<div class="row listCod" data-cod="<%= f.object.barcode %>">
<div class="small-6 columns show-for-small-only">
<%= f.input :barcode, label: "Cod Barras", input_html: { class: 'barcode_ror_dev' } %>
</div>
<%= f.input :order_id, :as => :hidden, input_html: { class: 'order_id_ror_dev' } %>
<div class="show-for-medium-up small-2 columns">
<%= f.input :cod_produto, label: "Produto", input_html: { class: 'cod_produto_ror_dev' } %>
</div>
<%= f.input :desc_produto,:as => :hidden, input_html: { class: 'desc_produto_ror_dev' } %>
<%= f.input :cod_cor,:as => :hidden, input_html: { class: 'cod_cor_ror_dev' } %>
<div class="small-2 show-for-medium-up columns">
<%= f.input :desc_cor,label: "Cor", input_html: { class: 'desc_cor_ror_dev' } %>
</div>
<div class="small-2 show-for-medium-up columns">
<%= f.input :desc_tamanho,label: "Tam", input_html: { class: 'desc_tamanho_ror_dev' } %>
</div>
<div class="small-2 show-for-medium-up columns">
<%= f.input :preco,label: "Preço",input_html: { class: 'preco_ror_dev' } %>
</div>
<div class="small-6 medium-2 columns">
<%= f.input :quantidade_dev,label: "Qtd Dev", input_html: { class: 'quantidade_ror_dev' } %>
</div>
<div class="show-for-medium-up medium-2 columns end">
<%= f.input :total_dev,label: "Total Dev",input_html: { class: 'total_ror_dev' } %>
</div>
<div class="small-1 columns end">
<%= link_to_remove_association "-", f, :class => "button tiny alert remove"%>
</div>
</div>
</div>
Output:
!(http://imgur.com/kVPpwY6)
In my form the user has to select a category for his post.
<div class="field form-group">
<%= f.text_field :category, class: "form-control" %>
</div>
(Currently I am using text-input instead of a drop-down list)
Posts belong to categories
#post = #category.posts.build(post_params)
However I can't understand how to get the category value out of that field.
I have tried passing a number, to find_by id, and string to find_by name.
#category = Category.find(params[:category]) #returns no Categoy with nil id
#category = Category.find_by(name: params[:category]) #returns no method error
any help would be appreciated
Edit:
Form code
<%= form_for [#company, #post], :html => { :class => "form-posts"} do |f| %>
<div class="field form-group">
<div class="input-group input-group-lg">
<span class="input-group-addon">$</span>
<%= f.text_field :text, class: "form-control", placeholder: "text", required: true %>
</div>
</div>
<div class="field form-group">
<div class="input-group">
<span class="input-group-addon">
<i class="glyphicon glyphicon-calendar"></i>
</span>
<%= f.text_field :date,
class: "form-control",
value: #today,
data: {behaviour: "datepicker"},
required: true %>
</div>
</div>
<div class="field form-group">
<%= f.text_field :comment, class: "form-control", placeholder: "Comment (optional)" %>
</div>
<div class="field form-group">
<%= f.text_field :category, class: "form-control" %>
</div>
<div class="actions"><%= f.submit 'Add', class: "btn btn-lg btn-primary" %></div>
<% end %>
Edit 2
controller:
form:
<%= f.text_field :category, class: "form-control" %>
def create
#company = current_user.companies.find(params[:company_id])
#category = #company.categories(params[:category])
#post = #category.posts.build(post_params)
debugger:
{"utf8"=>"✓", "authenticity_token"=>"...", "transaction"=>{"text"=>"lalala", "date"=>"11.11.2013", "comment"=>"", "category"=>"5"}, "commit"=>"Add post", "action"=>"create", "controller"=>"posts", "company_id"=>"2"}
undefined method `transactions'
Take a look at the development log.
Probably it will be something like params[:post][:category]
Get your category like this:
params[:post][:category]