I've got a nice bootstrap navigation menu with a search box in it.
I've got it in a partial file...
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
I like the layout of this search box. Unfortunately, I can't figure out how to get my rails search box to look the same...
<%= search_form_for #search do |f| %>
<div class="field">
<%= f.label :title_or_template_cont, "Search" %>
<%= f.text_field :title_or_template_cont %>
</div>
<div class="actions">
<%= f.submit "Search" %>
What changes do I need to make in my rails form to look like the bootstrap search box?
I tried a few classes within the rails search box, but wasn't close to the way it looked.
Any suggestions?
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
Checkout the gem "Simpleform" so you can style forms with css easily in rails using their helpers. Then:
<%= simple_form_for #search, html: {class: "navbar-form navbar-left"} do |f| %>
<div class="form-group">
<%= f.input_tag :title_or_template_cont, label: false, input_html: {class: 'form-control'}, placeholder: 'search' %>
</div>
<div class="actions">
<%= f.submit "Search", class: "btn btn-default" %>
Related
I've created a form so the user can add a new picture to the website catalog, but for some reasons it doesn't work. Once the form is filled out, I click on the 'Submit' button but nothing happens, I just stay on the same page (and I don't have any error message...).
I don't think the error comes from my Controller since nothing happens when I add the raise keyword in my Controller's 'create' method.
I'm sure this is an amateur mistake... but I can't see what it is. Thanks for your help!
picture.rb /
Picture model:
class Picture < ApplicationRecord
validates :name, presence: true
has_many_attached :photo
end
new.html.erb /
Here is my form :
<%= form_for(#picture) do |f| %>
<div class="form-group">
<%= f.label :name, "Please indicate the name" %>
<%= f.text_field :name, class:"form-control", placeholder:"(mandatory field)" %>
</div>
<div class="form-group">
<%= f.label :description, "Add a description" %>
<%= f.text_area :description, class:"form-control" %>
</div>
<div class="form-group">
<div class="row">
<div class="col">
<%= f.label :category, "Add a category" %>
<%= f.text_field :category, class:"form-control" %>
</div>
<div class="col">
<%= f.label :price, "Indicate the price (when applicable)" %>
<%= f.number_field :price, class:"form-control", placeholder:"0,00$ CAD" %>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col">
<p>Where do you want to add this item?</p>
<div>
<%= f.check_box :is_home_item %>
<%= f.label :is_home_item, "Homepage" %>
</div>
<div>
<%= f.check_box :is_portfolio_item %>
<%= f.label :is_portfolio_item, "Work" %>
</div>
<div>
<%= f.check_box :is_sketchbook_item %>
<%= f.label :is_sketchbook_item, "Sketchbook" %>
</div>
<div>
<%= f.check_box :is_shopping_item %>
<%= f.label :is_shopping_item, "Shopping" %>
</div>
</div>
<div class="col">
<div class="form-group">
<%= f.label :photo, "Select your picture" %>
<%= f.file_field :photo, class:"form-control-file" %>
</div>
</div>
</div>
</div>
<div class="form-group">
<%= f.submit class:"btn btn-lg btn-primary" %>
</div>
<% end %>
pictures_controller.rb /
class PicturesController < ApplicationController
def new
#picture = Picture.new
end
def create
#picture = Picture.new(picture_params)
if #picture.save
redirect_to root_path(#picture), notice: "Picture was successfully created"
else
render :new
end
end
private
def picture_params
params.require(:picture).permit(:name, :description, :category, :price, :is_home_item, :is_portfolio_item, :is_sketchbook_item, :is_shopping_item, :photo)
end
end
And here is the text I got on my local server console
Here is the HTML output of my form :
<form>
<input type="hidden" name="authenticity_token" value="7MxWbzbltjXcAx2dvgRwIu07WMpyjPQji6LI6ELifMZODLJyMBucNApnPRk8vsjshSEjyMMenDUfvDw6pN+/4Q==">
<div class="form-group">
<label for="picture_name">Indicate the name</label>
<input class="form-control" placeholder="(mandatory field)" type="text" name="picture[name]" id="picture_name">
</div>
<div class="form-group">
<label for="picture_description">Add a description</label>
<textarea class="form-control" name="picture[description]" id="picture_description"></textarea>
</div>
<div class="form-group">
<div class="row">
<div class="col">
<label for="picture_category">Add a category</label>
<input class="form-control" type="text" name="picture[category]" id="picture_category">
</div>
<div class="col">
<label for="picture_price">Indicate the price (when applicable)</label>
<input class="form-control" placeholder="0,00$ CAD" type="number" name="picture[price]" id="picture_price">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col">
<p>Where do you want to add your picture?</p>
<div>
<input name="picture[is_home_item]" type="hidden" value="0"><input type="checkbox" value="1" name="picture[is_home_item]" id="picture_is_home_item">
<label for="picture_is_home_item">Homepage</label>
</div>
<div>
<input name="picture[is_portfolio_item]" type="hidden" value="0"><input type="checkbox" value="1" name="picture[is_portfolio_item]" id="picture_is_portfolio_item">
<label for="picture_is_portfolio_item">Work</label>
</div>
<div>
<input name="picture[is_sketchbook_item]" type="hidden" value="0"><input type="checkbox" value="1" name="picture[is_sketchbook_item]" id="picture_is_sketchbook_item">
<label for="picture_is_sketchbook_item">Sketchbook</label>
</div>
<div>
<input name="picture[is_shopping_item]" type="hidden" value="0"><input type="checkbox" value="1" name="picture[is_shopping_item]" id="picture_is_shopping_item">
<label for="picture_is_shopping_item">Shopping</label>
</div>
</div>
<div class="col">
<div class="form-group">
<label for="picture_photo">Select your picture</label>
<input class="form-control-file" type="file" name="picture[photo]" id="picture_photo">
</div>
</div>
</div>
</div>
<div class="form-group">
<input type="submit" name="commit" value="Create Picture" class="btn btn-lg btn-primary" data-disable-with="Create Picture">
</div>
My routes :
Rails.application.routes.draw do
devise_for :users
# Pages routes
root to: 'pages#home'
get 'about', to: 'pages#about'
get 'portfolio', to: 'pages#portfolio'
get 'sketchbook', to: 'pages#sketchbook'
get 'shopping', to: 'pages#shopping'
# Pictures routes
resources :pictures
end
And these are my routes in the Terminal
Not quite sure why this is happening, but form_for is deprecated, so you should replace it with form_with.
You can use a model, such as your #picture with form_with as described in the docs.
<%= form_with(model: #picture) do |form| %>
# fields
<% end %>
This should create a form DOM object that looks like this:
<form action="/pictures" method="post" accept-charset="UTF-8" >
<input name="authenticity_token" type="hidden" value="..." />
...
</form>
If for some reason it doesn't, you can always pass a method: :post in the form_with (ie. <%= form_with(model: #picture, method: :post) do |form| %>).
Currently, you have got has_many_attached with a singular photo. That does not seem to be the right syntax. Have you tried changing to has_many_attached :photos and modifying the picture_params to have photos passed as an array photos: []?
Or if you wanted to attach one photo, then you should try changing to has_one_attached :photo in the Picture model.
<div class="modal-body">
<%= form_for :#hr_detail_avatar, url: hr_detaila_path, html: {role: "form", class: "form-horizontal", :multipart =>true}, method: :put do |form|%>
<div class="form-group">
<label for="image" class="col-sm-2 control-label">Photo Code</label>
<div class="col-sm-10">
<%= form.file_field :avatar %>
<!--<input type="file" id="user_image" name="image[avatar]" />-->
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10" style="margin-left: 35%;">
<input type="submit" class= "buttons save"value="Save" />
<button type="button" class="buttons cancel" data-dismiss="modal">Close</button>
</div>
</div>
<% end %>
</div>
the file_field does not send the parameters to the controller.
The controller does not receive any parameters from the view and an error is shown stating that the parameters are empty.
You need to pass the :avatar in the strong parameters . Also you need to check this link.
In your controller search where you have defined params.. I mean search for params.require
there inside .permit() include :avatar
Can anyone spot why I'm getting an error? It seems to be the last tag but removing it is not the solution.
Ask Question
enter image description here
×
Ask a Question
<!-- <%= form_for :question, url: '/questions', html: {class: 'form-horizontal'} do%> -->
<div class="modal-body">
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail" placeholder="Email" required>
</div>
</div>
<div class="form-group">
<label for="inputQuestion" class="col-sm-2 control-label">Question</label>
<div class="col-sm-10">
<textarea class="formControl" class="form-control" id="inputQuestion" placeholder="What would you like to know?" required></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</div>
</div>
</div>
The problem is that you're opening a Ruby block here:
<!-- <%= form_for :question, url: '/questions', html: {class: 'form-horizontal'} do %> -->
...but you never close it.
Keep in mind that ERB doesn't know anything about HTML, so putting ERB code inside HTML comments doesn't stop it from running. If you do <!-- <%= "foo" %> --> it'll render <!-- foo -->.
If you want to comment out ERb code, replace the opening tag with <%#:
<%#= form_for :question, url: '/questions', html: {class: 'form-horizontal'} do %>
If your block has a corresponding <% end %>, don't forget to comment that out as well:
<%#= form_for :question, url: '/questions', html: {class: 'form-horizontal'} do %>
...
<%# end %>
You are commenting out the form_for the html way, but that does not actually comment it out. Your page is looking for a <% end %> and doesn't find it.
If you want the form_for commented out you need to do it like so:
<% #form_for :question, url: '/questions', html: {class: 'form-horizontal'} do%>
My page contains 3 buttons New, Login, SignUp, and when I click New, I am getting form with two tabs, for New, Login and SignUp Buttons. But, I want, Login tab alone with page when I click the Login Button. And, SignUp tab alone with page, when I click on SignUp button.
Hope, some wil sureply help me... I am completely new to this .....
Here is my code...
Thanks in advance
Here is my code...
New Page code:
Login
SignUp
Login
SignUp
<%= f.label :content %><br />
<%= f.text_field :content %>
<%= f.label :user_id %><br />
<%= f.number_field :user_id %>
<%= f.submit %>
-->
<div class="modal-footer">
<button type="submit" class="btn btn-primary" >Save changes</button>
<button type="button" class="btn btn-primary" data-dismiss="modal">Cancel</button>
</div>
Index code:
New Micropost
Login
SignUp
As far I got you, I think you need to do as below:
# index.html
<%= form_for(MicroPost.new) do |f| %>
<ul class="nav nav-tabs">
<li>Login</li>
<li>SignUp</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="new">Login</div>
<div class="tab-pane " id="new1">SignUp</div>
<div class="field">
<%= f.label :content %><br />
<%= f.text_field :content %>
</div>
<div class="field">
<%= f.label :user_id %><br />
<%= f.number_field :user_id %>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary" >Save changes</button>
<button type="button" class="btn btn-primary" data-dismiss="modal">Cancel</button>
</div>
</div>
<% end %>
This is working for me.
Hope this would help.
Right now when I create a form using a form_for Ruby on Rails creates an extra <br> tag after the form. Is there an option to not have RoR create this for me? Here is the code for creating the form:
<%= form_for(:user, :url => create_user_path) do |f| %>
<div class="field">
<%= f.label :email %>
<%= f.text_field :email %>
</div>
<div class="field">
<%= f.label :password %>
<%= f.password_field :password %>
</div>
<div class="actions">
<%= f.submit "Submit" %>
</div>
<% end %>
Output:
<form method="post" action="http://localhost:3000/users" accept-charset="UTF-8"><div style="margin:0;padding:0;display:inline"><input type="hidden" value="✓" name="utf8"><input type="hidden" value="fsdfsdf+rgJKoc5sdQvsqvT2s=" name="authenticity_token"></div>
<div class="field">
<input type="text" size="30" name="user[password_clear]" id="user_password_clear" class="text_box">
</div>
<div class="field">
<input type="text" size="30" name="user[password]" id="user_password" class="text_box">
</div>
<div class="actions">
<input type="submit" value="Sign Up" name="commit" class="button button_medium button_green">
</div>
</form>
<br>
Thank you!
As long as you don't plan on creating a new form you could refrain from closing the form until you want a to appear, just don't add the <% end %> tag until you want a br and keep the following code inside the current form.
It's not very ellegant but it will probably work the way you want it to.