Customize Bootstrap Form In Rails View - ruby-on-rails

I can't figure out the proper formatting to modify my form partial in my view to look like the bootstrap form below with a appended button like this;
<div class="col-lg-9">
<div class="input-group input-group-lg">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div><!-- /input-group -->
I would like the form to post to :home and the appended button to replace the default f.submit button in a Scaffold. Here's a Scaffold form partial that I'd like to modify.
<%= form_for #anesu, :html => { :class => 'form-horizontal' } do |f| %>
<div class="control-group">
<%= f.label :home, :class => 'control-label' %>
<div class="controls">
<%= f.text_field :home, :class => 'text_field' %>
</div>
</div>
<div class="form-actions">
<%= f.submit nil, :class => 'btn btn-primary' %>
<%= link_to t('.cancel', :default => t("helpers.links.cancel")),
anesus_path, :class => 'btn' %>
</div>
<% end %>
Please guide me on how to format my code and the right methods to use

<%= form_for #anesu do |f| %>
<div class="col-lg-9">
<div class="input-group input-group-lg">
<%= f.text_field :home, :class => 'form-control' %>
<span class="input-group-btn">
<%= f.submit "Go!", :class => 'btn btn-primary' %>
</span>
</div>
</div>
<% end %>

Related

Rails Devise Login 401 Unauthorized

What I am trying to do
I am trying to set up the Authentication with Devise in the Session Controller, methods new and create.
I am using Rails 5 and I customized the View new.html.erb.
What is the problem
I am not able to authenticate successfully after signing out from the Account. The problem is connected with the sign_in_params hash, which is passed blank to the new method of the session_controller
Testing of the functionality
I conducted a test of the Login, by including a breakpoint in my Account::SessionsController, I noticed that the sign_in_params hash was blank, then the program exits with 401 Unauthorized.
8: def new
9: self.resource = resource_class.new(sign_in_params)
=> 10: clean_up_passwords(resource)
11: yield resource if block_given?
12: respond_with(resource, serialize_options(resource))
13: end
sign_in_params => {}
My Code
I was able by resetting my code to identify the cause of my problem. It is connected to the custom Devise View that I modified in app/views/devise/sessions/new.html.erb
This is the code:
<form class="login-form" action="index.html">
<div class="login-wrap">
<%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
<p class="login-img"><i class="icon_lock_alt"></i></p>
<div class="field">
</div>
<div class="input-group">
<span class="input-group-addon"><i class="icon_profile"></i></span>
<%= f.email_field :email, autofocus: true, :class => "form-control", :placeholder => "Username" %>
<!--<input type="text" class="form-control" placeholder="Username" autofocus>-->
</div>
<div class="input-group">
<span class="input-group-addon"><i class="icon_key_alt"></i></span>
<%= f.password_field :password, autocomplete: "off", :class => "form-control", :placeholder => "Password" %>
</div>
<% if devise_mapping.rememberable? -%>
<label class="checkbox">
<%= f.check_box :remember_me %>
<%= f.label :remember_me, :class => "remember_me_Label" %>
<span class="pull-right"> <%= link_to "Forgot Password?", {}, :id => "lostPw" %></span>
</label>
<% end -%>
<%= f.submit "Login", :class => "btn btn-primary btn-lg btn-block" %>
<%= link_to "Signup", new_account_registration_path, :method => :get, class: "btn btn-info btn-lg btn-block signuptext" %>
<% end %>
</div>
</form>
In the log, I have the following important informations, but no errors:
Started GET "/account/index.html?utf8=%E2%9C%93&authenticity_token=s1aA%2FNcZo1HIkF1qJOlrIAlM9rJM3y1ced8tQLiWnGsSugBVs0AYKVJR8QLa1I%2BT500sYu7H1%2BPQ2UwH3JG2ew%3D%3D&account%5Bemail%5D=test%40email.com&account%5Bpassword%5D=[FILTERED]&account%5Bremember_me%5D=0&commit=Login" for 127.0.0.1 at 2017-02-06 19:16:04 +0100 (pid:8311)
2017-02-06 19:16:04.557 [fyi] Processing by AccountController#index as HTML (pid:8311)
2017-02-06 19:16:04.557 [fyi] Parameters: {"utf8"=>"✓", "authenticity_token"=>"s1aA/NcZo1HIkF1qJOlrIAlM9rJM3y1ced8tQLiWnGsSugBVs0AYKVJR8QLa1I+T500sYu7H1+PQ2UwH3JG2ew==", "account"=>{"email"=>"test#email.com", "password"=>"[FILTERED]", "remember_me"=>"0"}, "commit"=>"Login"} (pid:8311)
2017-02-06 19:16:04.558 [fyi] Completed 401 Unauthorized in 1ms (ActiveRecord: 0.0ms) (pid:8311)
Following is the solution of the problem
Thanks
Fabrizio Bertoglio
Solution
The problem is in the html code of new.html.erb, as I did not remove the html <form> tags from the html and this would cause problems with my <%= form_for > <% end %> rails tag. This is the reason why strong_params is empty.
The form was not submitting any value to the controller, the problem could have been easily discovered by debugging directly the new.html.erb view instead of the controller.
Was helpful having the input from Max, that suggested me to restart all over with Devise, so that I could understand that the problem was connected with the form and not with rails strong parameters.
This is the correct new.html.erb.
<%= form_for(resource, as: resource_name, url: session_path(resource_name), html: { class: "login-form"}) do |f| %>
<div class="login-wrap">
<p class="login-img"><i class="icon_lock_alt"></i></p>
<div class="input-group">
<span class="input-group-addon"><i class="icon_profile"></i></span>
<%#= f.label :email %>
<%= f.email_field :email, autofocus: true, :class => "form-control", :placeholder => "Username" %>
<!--<input type="text" class="form-control" placeholder="Username" autofocus>-->
</div>
<div class="input-group">
<span class="input-group-addon"><i class="icon_key_alt"></i></span>
<%#= f.label :password %>
<%= f.password_field :password, autocomplete: "off", :class => "form-control", :placeholder => "Password" %>
</div>
<% if devise_mapping.rememberable? -%>
<label class="checkbox">
<%= f.check_box :remember_me %>
<%= f.label :remember_me, :class => "remember_me_Label" %>
<span class="pull-right"> <%= link_to "Forgot Password?", {}, :id => "lostPw" %></span>
</label>
<% end -%>
<%= f.submit "Login", :class => "btn btn-primary btn-lg btn-block" %>
<%= link_to "Signup", new_registration_path(resource_name), :method => :get, class: "btn btn-info btn-lg btn-block signuptext" %>
<div class="links ">
<%= render "devise/shared/links2" %>
</div>
</div>
<% end %>
<div class="text-right">
<div class="credits">
<!--
All the links in the footer should remain intact.
You can delete the links only if you purchased the pro version.
Licensing information: https://bootstrapmade.com/license/
Purchase the pro version form: https://bootstrapmade.com/buy/?theme=NiceAdmin
-->
Business Bootstrap Themes by BootstrapMade
</div>
</div>
</div>

How do I convert this form_tag helper into a simple_form_for call?

This is the HTML I am trying to produce:
<div class="col-lg-3">
<div class="input-group custom-search-form">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div><!-- /input-group -->
</div>
This is my vanilla Rails form helper:
<div class="col-lg-3">
<div class="input-group custom-search-form">
<%= form_tag(dashboard_index_path, :method => "get", id: "search-form", :class => "navbar-form navbar-left") do %>
<%= text_field_tag :search, params[:search], placeholder: "Search videos", :class => "form-control" %>
<span class="input-group-btn">
<%= submit_tag "", name: nil, class: "btn btn-default" %>
<span class="glyphicon glyphicon-search"></span>
</span>
<% end %>
</div><!-- /input-group -->
</div> <!-- //col-lg-3 -->
This is what this looks like:
Whereas what I am trying to achieve is this:
Generated from this:
http://bootsnipp.com/snippets/featured/search-box
I would like to generate the above HTML, using simple_form_for, rather than the form_tag helper.
So I have simple_form installed. How do I convert this form_tag into a simple_form_for call?
<%= form_tag(dashboard_index_path, :method => "get", id: "search-form", :class => "navbar-form navbar-left") do %>
You can do this with form_tag also. Try below code :
<%= form_tag(dashboard_index_path, :method => "get", id: "search-form", :class => "navbar-form navbar-left") do %>
<div class="col-lg-3">
<div class="input-group custom-search-form">
<%= text_field_tag :search, params[:search], placeholder: "Search videos", :class => "form-control" %>
<span class="input-group-btn">
<%= button_tag "", name: nil, class: "btn btn-default", type: "button" do %>
<span class="glyphicon glyphicon-search"></span>
<% end %>
</span>
</div><!-- /input-group -->
</div> <!-- //col-lg-3 -->
<% end %>
Form_tag do not generate an input html class and submit_tag neither a button html class, and maybe css code expect this class, try with button_tag

How to perform a query via bootstrap search box

In the form_tags I can easily add methods and get params from the text_field_tag, for example to query a database or to perform a search.
FORM_TAG
</form>
<%= form_tag usernotes_path, method: 'get' do %>
<%= text_field_tag :query, params[:query], size: 150, placeholder: "Search", class: "searchInput"%>
<%= submit_tag 'Search', class: 'btn btn-success' %>
<% end %>
</div>
Now I am trying to use bootstrap "search" form, but not sure how to achieve the same result as the form_tag (where to put the method, how to add actions, how to perform a query?)
BootStrap Search
<div class="col-sm-3 col-md-3">
<form class="navbar-form" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</div>
<div class="col-sm-3 col-md-3">
<%= form_tag usernotes_path, method: 'get', class: 'navbar-form', role: 'search' do %>
<div class="input-group">
<%= text_field_tag :query, params[:query], size: 150, placeholder: "Search", class: "form-control"%>
</div>
<%= submit_tag 'Search', class: 'btn btn-success' %>
<div class="input-group-btn">
<%= button_tag(type: "submit", class: "btn btn-default") do %>
<i class="glyphicon glyphicon-search"></i>
<% end %>
</div>
<% end %>
</div>
This should be it, didn't tested it in an app but I think it will work, let me know in a comment if it's not.

Rails Bootstrap Modal fields do not get focused on clicking jquery-ui conflict

I have a Rails app using Bootstrap. I'm creating a modal to enter labor against a workorder. The modal shows up fine.
But, if you left click on a field to enter data, it does nothing. Yet, if you right click, you can enter data. Plus the dropdown selector doesn't work. Also the calendar selector shows up only if you right click. The save & close buttons, and the checkbox work fine.
Here is a pic from the browser:
The modal code:
<a data-toggle="modal" href="#eventform-<%= workorder.id %>">
<i class="icon-time"></i>
<%= render :partial => "eventform", locals: {workorder: workorder} %>
</a>
The `_eventform.html.erb:
<div id="eventform-<%= workorder.id %>" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="eventformLabel" aria-hidden="true">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h4 id="eventformLabel">Add Labor -
Employee: <%= current_user.employee.employee_full_name %>
- Workorder: <%= Workorder.find(workorder.id).wonum %>
</h4>
</div>
<div class="modal-body">
<%= simple_form_for Event.new do |f| %>
<%= f.hidden_field :employee_id, :value => current_user.employee.id %>
<%= f.hidden_field :workorder_id, :value => workorder.id %>
<%= f.hidden_field :maxsynch, :value => "N" %>
<%= f.hidden_field :all_day, :value => true %>
<div class="span3">
<%= f.association :actcode, :label_method => :act_desc, :label => 'Activity', :include_blank => true %>
<%= f.input :hours, :label => 'Hours' %>
</div>
<div class="span3">
<%= f.input :title, :label => 'Work Performed' %>
<%= f.input :starts_at, :as => :string, :label => 'Date', :input_html => {:class => 'datepicker', :value => Date.today.to_s} %>
<%= f.input :overtime, :label => 'Overtime' %>
</div>
<div class="modal-footer">
<%= f.submit 'Save', :class => 'btn btn-mini btn-primary' %>
<a class="btn btn-mini" data-dismiss="modal" href="#">Close</a>
</div>
<% end %>
</div>
</div>
Thanks for the help!
UPDATE1
If I remove //= require jquery.ui.all from application.js, then the fields work. But, then I loose jquery.ui functionality.
UDPATE2
The problem goes away if I remove 'gem fullcalendar'

How to avoid html tags in edit page

I am using rails 4 and I have used jquery text-editor. For omitting html tags, I have used sanitize helper.it's working fine.But edit the form shows html tags in description field.
form.html.erb
<%= simple_form_for #newsletter, html: {class: 'form-inline form-horizontal'}, :validate => true do |f|%>
<br/></br/><br/>
<div class="tabable well">
<div class="tab-content">
<div class="tab-pane active">
<div class="inputs">
<h4 class="" style="border-bottom: 1px solid #dcdcdc;"> <img src="/assets/side_menu/news-and-events.png" alt="Home" ></i> Add NewsLetter</h4><br/><br/>
<div class="offset0">
<%= f.input :name %>
<%= f.input :description, as: 'text', :input_html =>{:rows => '20', :cols => '180', :class => 'wysiwyg input-block-level' }%>
</div>
</div>
<div class="form-actions">
<%= button_tag(type: 'submit', class: "btn btn-primary") do %>
<i class="icon-ok icon-white"></i> Save
<% end %>
<%= link_to new_newsletter_path, class: 'btn btn-inverse' do %><i class='icon-hand-left'> Cancel</i><% end %>
</div>
</div>
</div>
<% end %>
Edit Page
edit.html.erb
<%= render 'news/sidebar'%>
<%= link_to 'Back', newsletters_path, :class => 'btn btn-inverse animated rotateIn' %>
<%= link_to 'View', newsletter_path(#newsletter), :class => 'btn btn-success animated rotateIn pull-right' %>
<br><br>
<div class='row-fluid clear'>
<div class='box gradient'>
<div class=''>
<%= render 'form' %>
</div>
</div>
</div>
I don't know , how to use sanitize in edit page. Please Guide Me..
it appears you are missing a closing </div>

Resources