I'm trying to make two input (firstname and lastname) to next to each other.
Here is my code and it's currently just showing two big rows of input window.
= simple_form_for #user, html: {class: 'form-inline'} do |f|
= f.fields_for :profile, #user.profile || Profile.new, html: {class: 'form-inline'} do |p|
.form-1
.form-1-detail
.input-text
= f.input :last_name, required: true
.input-text
= f.input :first_name, required: true
I'm now sure how to make them to display inline. Can anyone help me?
Thanks!
Updated. This is the actual HTML generate from
= simple_form_for #user, html: {class: 'form-inline'} do |f|
= f.fields_for :profile, #user.profile || Profile.new do |p| # removed form-inline here
.form-1
.form-1-detail
.form-group
= f.input :last_name, required: true
.form-group
= f.input :first_name, required: true
</div><form class="simple_form form-inline" novalidate="novalidate" id="new_user" action="/users" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="✓" /><input type="hidden" name="authenticity_token" value="DhQSodBk8kxdE6q9uPJDKSs9FfxCNLyXFYT3bZ42HlZfHefxfG3BDq9qkFpxkX7MBZI4Mc4Wje6LKw7Gp1YcjQ==" />
<div class="form-1">
<div class="form-1-detail">
<div class="form-group">
<div class="input string required user_last_name"><label class="string required" for="user_last_name"><abbr title="required">*</abbr> 姓</label><input class="string required" placeholder="姓" type="text" name="user[last_name]" id="user_last_name" /></div>
</div>
<div class="form-group">
<div class="input string required user_first_name"><label class="string required" for="user_first_name"><abbr title="required">*</abbr> 名</label><input class="string required" placeholder="名" type="text" name="user[first_name]" id="user_first_name" /></div>
</div>
</div>
</div></form>
You should install the simple_form wrappers:
rails generate simple_form:install --bootstrap
From there you can structure a inline_form using it's corresponding wrapper:
simple_form_for #user, wrapper: :inline_form, html: { class: 'form-inline' } ...
They have an example app: https://github.com/rafaelfranca/simple_form-bootstrap
The specific view that using this is (sorry it's ERB however):
https://github.com/rafaelfranca/simple_form-bootstrap/blob/master/app/views/examples/_inline_form_sf.html.erb
Try using f.input_field instead of f.input.
Reference: https://github.com/plataformatec/simple_form#stripping-away-all-wrapper-divs
The simple_form gem uses Bootstrap, right? I compared your code to the Bootstrap Form docs and I think you should be using form-group classes inside the form-inline.
= simple_form_for #user, html: {class: 'form-inline'} do |f|
= f.fields_for :profile, #user.profile || Profile.new do |p| # removed form-inline here
.form-1
.form-1-detail
.form-group
= f.input :last_name, required: true
.form-group
= f.input :first_name, required: true
Alternatively, unless you have unique CSS that you need to apply for the form-1 and form-1-detail classes, this might be able to be shortened to:
= simple_form_for #user, html: {class: 'form-inline'} do |f|
= f.fields_for :profile, #user.profile || Profile.new do |p| # removed form-inline here
.form-group
= f.input :last_name, required: true
.form-group
= f.input :first_name, required: true
If that doesn't work, can you post the actual HTML that is generated for the form in the browser?
Related
I have a form that contains 4 input fields.
<%= semantic_form_for #some_model, html: {class: "horizontal-form"} do |f| %>
<%= f.input :person_id %>
<%= f.input :car_id %>
<%= f.input :person_id %>
<%= f.input :car_id %>
<%= f.actions do %>
<%= f.action :submit, button_html: {class: "btn btn-primary"} %>
<% end %>
<% end %>
As you can see the input fields are identical.
I want to group these fields so they can be posted as an array like this:
[ [3838, 9090], [2938, 893] ]
Ang then i can be able to loop this array and fetch the data i need from an external api.
How can i achieve this?
version of HTML
<input type="textbox" name="person_id[]", value="person A">
<input type="textbox" name="car_id[]", value="car A">
<input type="textbox" name="person_id[]", value="person B">
<input type="textbox" name="car_id[]", value="car B">
OR
= simple_form_for # some_model do |f|
= f.input_field :name, multiple: true
= f.input_field :name, multiple: true
= f.submit
Could you not create another field on your Model to hold the array.
Then create a Private controller method that runs when the form is saved and appends all the values to the array?
I have a form which takes two radio buttons, E-Mail OR URL. In my model, these two fields are required but I only want one of them to be depending on the radio button clicked.
Potential solution: Add hidden field and pass params into model where I can validate?
<%= form_for #webhook do |f| %>
<div class="form-group">
<div class="checkbox email">
<label>
<%= f.radio_button :show_url_form, 0, checked: true %>
Lorum Ipsum
</label>
</div>
<div class="checkbox url">
<label>
<%= f.radio_button :show_email_form, 1, checked: false %>
Lorum Ipsum
</label>
</div>
</div>
<div class="form-group url">
<div class="form-group">
<%= f.hidden_field :perform_validation, value: true %>
<%= f.label :url %>
<%= f.text_field :url, class: "form-control", autofocus: true %>
</div>
<div class="form-group email" style="display: none;">
<%= f.label :email %>
<%= f.text_field :email %>
<label class="radio-inline">
<%= f.radio_button :format, 'formatone' %> formatone
</label>
<label class="radio-inline">
<%= f.radio_button :format, 'formattwo' %> formattwo
</label>
</div>
<% end %>
model:
validates :url, presence: true
validates :email, presence: true
In your model you can add a condition to both validtions...
attr_accessor :skip_url_validations
attr_accessor :skip_email_validations
validates_presence_of :url, unless: :skip_url_validations
validates_presence_of :email, unless: :skip_email_validations
Then in your controller you can set either skip_url or skip_email to true depending on the params passed in by the form...something like this
#webhook = Webhook.new(webhook_params)
#webhook.skip_email_validations = true if params.has_key?(:url)
#webhook.skip_url_validations = true if params.has_key?(:email)
I can't figure out why my form is not passing params to the registration controller. I have a registration form that doubles as a login form using jquery and javascript. My second form (the last one) is supposed to send over registration info to the registration controller. Unfortunatly I keep getting wrong number of arguments (0 for 1). I'm not sure how I'm not passing the information in, any help is appreciated.
new.html.erb
<div id="imageDisplay"></div>
<div class="login-switch">
<div id="login-div" class="button button-outline button-calm switches active-button">
LOG IN
</div>
<div id="signup-div" class="button button-outline button-calm switches">
SIGN UP
</div>
</div>
<%= form_for(#user, url: sessions_path, html: {id: "sign-in-form"}) do |f| %>
<div class="list list-inset">
<label id="sign-up-input" class="item item-input">
<%= f.email_field :username, autofocus: true %>
</label>
<label id="sign-up-input" class="item item-input">
<%= f.password_field :password, autocomplete: "off" %>
</label>
<%= f.submit "Log in", class: "button button-block button-calm" %>
</div>
<% end %>
<%= form_for(#user, url: registrations_path, html: {id: "sign-up-form"}) do |f| %>
<div class="list list-inset">
<div id="part-1">
<!-- part one of sign up -->
<label id="sign-up-input" class="item item-input">
<%= f.email_field :email, autofocus: true, placeholder: "E-mail" %>
</label>
<label id="sign-up-input" class="item item-input">
<%= f.password_field :password, autocomplete: "off", placeholder: "Password" %>
</label>
<label id="sign-up-input" class="item item-input">
<%= f.password_field :password_confirmation, autocomplete: "off",placeholder: "Confirm password" %>
</label>
<div id="slide-part-2" class="button button-block button-calm">Next</div>
</div>
<div id="part-2">
<!-- part two of sign up -->
<%= f.file_field :avatar, id: "fileInput"%>
<label id="sign-up-input" class="item item-input">
<%= f.text_field :username, autofocus: true, placeholder: "username" %>
</label>
<%= f.submit "Sign up", class: "button button-block button-calm" %>
</div>
<% end %>
</div>
</div>
registrations_controller.rb
class RegistrationsController < ApplicationController
[![enter image description here][1]][1] def new
end
def create
#user = User.create(sign_up_params)
if #user.save
log_in #user
flash[:success] = "We Made it!"
else
flash[:error] = #user.errors
end
end
private
def sign_up_params
params.require.(:user).permit(:email, :username, :avatar, :password, :password_confirmation, :trump)
end
end
Remove . after params.require:
def sign_up_params
params.require(:user).permit(:email, :username, :avatar, :password, :password_confirmation, :trump)
end
The error says wrong number of arguments(0 for 1), it's because you didn't pass any argument in the require method, you added a . before the opening parenthesis for the argument, you need to remove it, because Ruby is executing (:user) as a method but its not. Fix this error by correcting the typo as dp7 mentioned in his answer
def sign_up_params
params.require(:user).permit(:email, :username, :avatar, :password, :password_confirmation, :trump)
end
Hope that helps!
It should be like that :
def sign_up_params
params.require(:user).permit(:email, :username, :avatar, :password, :password_confirmation, :trump)
end
I have a rails app where I am trying to upload multiple images using nested_attributes but am running into great difficulty. The images don't seem to be saving to mongodb. I have followed this tutorial (though it seems lacking in detail): http://initializd.com/blog/2013/3/upload-multiple-files-with-html5-rails-mongoid-paperclip-and-google-cloud-storage
Basically, I have a form where a user is able to submit multiple listings (as nested attributes), and under each listing they are able to submit multiple images (also as nested attributes).
Here is my form:
The important part is the file_field_tag where the user is supposed to upload multiple images.
<%= nested_form_for #user, url: wizard_path, :html => { :multipart => true } do |f| %>
<h1 style="margin-bottom: 6%;"> Add Listings </h1>
<!-- nested fields -->
<%= f.fields_for :listings do |builder| %>
<div class="field form-group">
<%= builder.label :type %> <br />
<%= builder.select :type, options_for_select(listing_types), {}, { :class => 'form-control', :required => 'true' } %>
</div>
<div class="field form-group">
<%= builder.label :title %> <br />
<%= builder.text_field :title, class: 'form-control', required: 'true' %> <br />
</div>
<div class="field form-group">
<%= builder.label :description %> <br />
<%= builder.text_area :description, class: 'form-control', required: 'true' %>
</div>
<div class="field form-group">
<%= builder.label :url %> <br />
<%= builder.text_field :url, class: 'form-control', required: 'true' %>
</div>
<div class="field form-group">
<%= builder.label :zipcode %> <br />
<%= builder.text_field :zipcode, class: 'form-control', size: '24x4', required: 'true' %>
</div>
<div class="field form-group">
<%= label_tag "upload images" %> <br />
<%= file_field_tag('listing_images_attributes_file', multiple: true, name: "user[listings_attributes][images_attributes][][image]", :required => 'true') %>
</div>
<div class="field form-group">
<%= builder.link_to_remove "Remove this listing", :onclick =>"myFunction(this)" %>
<hr style="height: 2px; background-color: lightgray;">
</div>
<% end %>
<p style="margin-bottom: 15px;"><%= f.link_to_add "Add a listing", :listings %></p>
<div class="actions">
<%= f.submit "Continue", class: "btn btn-lg btn-primary" %>
</div>
<% end %>
Here are my models:
Listing Model:
class Listing
include Mongoid::Document
include Mongoid::Timestamps
field :title, type: String
field :type, type: String
field :description, type: String
field :url, type: String
field :zipcode, type: String
# association between listing and user
embedded_in :user
# each listing has many images
embeds_many :images, :cascade_callbacks => true
accepts_nested_attributes_for :images, :allow_destroy => true
end
Image Model:
class Image
include Mongoid::Document
include Mongoid::Timestamps
include Mongoid::Paperclip
field :listing_id, type: Integer # what is the purpose of this field exactly?
embedded_in :listing
has_mongoid_attached_file :image,
:path => ":rails_root/public/images/:id/:filename",
:url => "/images/:id/:filename"
end
Snippet from user controller update action (basically my create):
def update
#user = current_user
#have to include steps to validate zip code
case step
when :personal
#user.update_attributes(user_params)
when :listings
# should I build a listing as a default input?
# listing = #user.listings.build
#user.update_attributes(user_params)
end
render_wizard #user
end
def user_params
params.require(:user).permit(:first_name, :last_name, :zipcode, :bio, listings_attributes: [:title, :type, :description, :url, :zipcode,
{ images_attributes: [:image] }, :_destroy, :id])
end
Basically I am trying to get a user to be able to upload multiple listings, then multiple images under each listing. I wonder if this is possible using nested_attributes or will I have to handle the params manually? Also wondering whether my strong params are setup correctly. Here is a snippet from my server logs to show what my params look like:
Parameters: {"utf8"=>"✓", "authenticity_token"=>"HUpgUfukx3Rqb2Ye3su1/9ts4byC1BFrB3HOLXgQeJr8Vrcf9JyQYvR52FC5psLPZGD2x2DlzmlQRRgEXQWo2g==", "user"=>{"listings_attributes"=>{"0"=>{"type"=>"Airbnb", "title"=>"test", "description"=>"test", "url"=>"test", "zipcode"=>"test", "_destroy"=>"false", "id"=>"57a2b9ba9cd25d2d94110543"}}}, "listing"=>{"images_attributes"=>[{"image"=>#<ActionDispatch::Http::UploadedFile:0x000001016c2b20 #tempfile=#<Tempfile:/var/folders/vp/4hffkvd52gd317mgfqczqspm0000gn/T/RackMultipart20160804-11668-1fjlflq.jpg>, #original_filename="event1.jpg", #content_type="image/jpeg", #headers="Content-Disposition: form-data; name=\"listing[images_attributes][][image]\"; filename=\"event1.jpg\"\r\nContent-Type: image/jpeg\r\n">}]}, "commit"=>"Continue", "id"=>"listings"}
Sorry for the long description, but I was really hoping someone could answer this question. Thank you so much!
So I am trying to get client_side_validations gem working and when I tab out of my email field, I get this error:
Uncaught TypeError: Cannot read property 'user[email]' of undefined
This is my form helper:
<%= form_for(resource, :as => resource_name, :class => "send-with-ajax", :url => user_registration_path(resource), :validate => true) do |f| %>
<%= f.email_field :email, :id => "form-email", :placeholder => "your-email#address.com", :input_html => {:autofocus => true}, :validate => true %>
<%= f.submit :label => "Submit", :value => "Sign Me Up!" %>
<div class="ajax-response"><%= devise_error_messages! %></div>
<% end %>
Which generates this HTML:
<form accept-charset="UTF-8" action="/users" class="new_user" data-validate="true" id="new_user" method="post" novalidate="novalidate">
<input name="utf8" type="hidden" value="✓" />
<input name="authenticity_token" type="hidden" value="9JdqaiushdauhsdioauhdoiuhNLSAVCGrc+PLJAQ=" />
<input data-validate="true" id="form-email" input_html="{:autofocus=>true}" name="user[email]" placeholder="your-email#address.com" size="30" type="email" />
<input label="Submit" name="commit" type="submit" value="Sign Me Up!" />
<div class="ajax-response"></div>
</form>
Edit 1: Even when I change the form helper from f.email_field :email, to f.text_field :email...I am still getting this error.
So I found the solution, it seems that either client_side_validations or devise are altering the id of the form - which would break the JS validation.
So the solution is to enforce the id of the form, so my form_for helper now looks like this:
<%= form_for(resource, :as => resource_name, :class => "send-with-ajax", :url => user_registration_path(resource), :validate => true, :html => { :id => 'user_new' }) do |f| %>
I found this solution here.
Have a look at the following #263 Client Side Validations. This should help.