I am working on a project using ruby 2 and rails 4. I want to create a progression bar in simple_form. I got some resources from https://github.com/aarondo/progression.js/blob/master/demo/index.html
and it does work perfectly. But it was created using html, and i want to create using simple_form_for. My codes are:
<%= simple_form_for #kyc do |f| %>
<h2>Personal Information</h2>
<%= f.input :first_name , placeholder: 'Type Your First Name', label:'First Name', required: true, input_html: { :value => ''}, autofocus: true %>
<%= f.input :last_name , placeholder: 'Type Your Last Name', label:'Last Name', required: true, input_html: { :value => ''} %>
<%= f.input :pan , placeholder: 'Type Your PAN No', label:'PAN', required: true, input_html: { :value => ''} %>
<p align="center"><%= f.submit "Save", id: "kycs_button" %></p>
<% end %>
Can any one please help me to solve this problem? Thank you.
The only thing I can spot right away is that you did not put the data-progression attribute in and you didn't put the data-helper
If you ommit the data-progression attribute, the progress-bar always stays at 0%
Related
There are over 9000 values in my dataset that users can choose from through a select tag. I am using select2 gem so they can search through the dataset but the time to load after and before i input something in the form is a lot. How do I reduce this? I alrady have minimuminputlength as 2 and that is not working for some reason.
<script>
$(document).ready(function() {
minimumInputLength: 2
$('.js-example-basic-single').select2();
});
</script>
<%= form_for #profile, url: user_profile_path, :html => { :multipart => true } do |f| %>
<%= f.text_field :first_name, placeholder: "First Name", class: 'input-1' %>
<%= f.text_field :last_name, placeholder: "Last Name", class: 'input-1' %>
<%= f.select :city, ['les Escaldes,Andorra,Escaldes-Engordany,3040051', 'Andorra la Vella,Andorra,Andorra la Vella,3041563', 'Umm al Qaywayn,United Arab Emirates,Umm al Qaywayn,290594'...], { :include_blank => 'City' }, :required => true, class: 'js-example-basic-single' %>
<% if current_user.profile %>
<%= f.submit 'Update', class: 'btn btn-default', class: 'bu' %>
<% else %>
<%= f.submit 'Create', class: 'btn btn-default', class: 'bu' %>
<% end %>
<% end %>
Also how I do edit the font and font size of the contents of the sleect 2 select values. Editing the class, 'js-example-basic-single' does not work.
Edit: The suggestion below does not work either for me. Am I doing something wrong?
<script>
$(document).ready(function() {
$('.js-example-basic-single').select2();
});
$('select').select2({
minimumInputLength: 3
});
</script>
<%= form_for #profile, url: user_profile_path, :html => { :multipart => true } do |f| %>
<%= f.text_field :first_name, placeholder: "First Name", class: 'input-1' %>
<%= f.text_field :last_name, placeholder: "Last Name", class: 'input-1' %>
<%= f.file_field :avatar, class: 'input-1'%>
<%= f.select :age, [13, 14, 15,16,17...], { :include_blank => 'Age' }, :required => true, class: 'input-1' %>
<%= f.select :gender, ['Male','Female', 'Other'], { :include_blank => 'Gender' }, :required => true, class: 'input-1' %>
<%= f.select :city, ['les Escaldes,Andorra,Escaldes-Engordany,3040051', 'Andorra la Vella,Andorra,Andorra la Vella,3041563', 'Umm al Qaywayn,United Arab Emirates,Umm al Qaywayn,290594'...],{ :include_blank => 'City' }, :required => true, class: 'js-example-basic-single' %>
<%= f.text_field :collegeemail, placeholder: "College Email (Leave Empty If You Do Not Have One)", class: 'input-1' %>
<% if current_user.profile %>
<%= f.submit 'Update', class: 'btn btn-default', class: 'bu' %>
<% else %>
<%= f.submit 'Create', class: 'btn btn-default', class: 'bu' %>
<% end %>
<% end %>
Seems to me you're putting all of the existing 9000+ cities from your db into the page. That's why it takes so long to open a select (it takes some time for user to download such page + it probably takes long to just open/render such select after the page is loaded).
You have to pass just a few options (cities in your case) on the page initially and fetch the rest using AJAX, see this instruction in the select2 docs.
You will need to implement an API endpoint in your Rails app to be able to fetch cities via AJAX request.
I have a selection option in my form that I know is deterring the form from submitting. I can't figure out why though. Here is the snippet that is causing an issue:
<%= f.select(:state_id, options_for_select(State.all.map {|p| [ p.home_state, p.id ]}), :label => "State", :class => "dropdown-menu")%>
Here is the rest of the form:
<% provide(:title, 'New Profile') %>
<%= bootstrap_form_for(#profile) do |f| %>
<%= f.text_field :name, :autofocus => true, :placeholder => 'Name' %>
<%= f.number_field :age, :placeholder => 'Age' %>
<%= f.form_group :sex, label: { text: "Sex" } do %>
<br>
<%= f.radio_button :sex, 'Male', label: "Male", inline: true %>
<%= f.radio_button :sex, 'Female', label: "Female", inline: true %>
<% end %>
<%= f.text_field :city, :id => 'gmaps-input-address', :placeholder => "City" %>
<%= f.select(:state_id, options_for_select(State.all.map {|p| [ p.home_state, p.id ]}), :label => "State", :class => "dropdown-menu")%>
<%= f.submit "Submit", :class =>'btn btn-primary' %>
<% end %>
Any help is always much appreciated.
If anything, you should look at the collection_select helper:
<%= bootstrap_form_for(#profile) do |f| %>
<%= f.text_field :name, autofocus: true, placeholder: 'Name' %>
<%= f.number_field :age, placeholder: 'Age' %>
<%= f.form_group :sex, label: { text: "Sex" } do %>
<%= f.radio_button :sex, 'Male', label: "Male", inline: true %>
<%= f.radio_button :sex, 'Female', label: "Female", inline: true %>
<% end %>
<%= f.text_field :city, :id => 'gmaps-input-address', placeholder: "City" %
<%= f.collection_select :state_id, State.all, :home_state, :id, prompt: "State", class: "dropdown-menu")%>
<%= f.submit "Submit", class: 'btn btn-primary' %>
<% end %>
You'll also want to post any console logs you may have received for the request. Remember that computers are logic-based, they're not emotional and will only stop working if there's an error. Your job is to find the error and fix it, hence showing what's going on with your code infinitely helps, where guesswork doesn't :)
Does anyone know how to remove form labels? I have tried:
<%= comfy_form_for #comment, :as => :comment, options: {label: false}, :url => comfy_blog_comments_path(#cms_site.path, #blog.path, #post.slug) do |form| %>
also
<%= comfy_form_for #comment, :as => :comment, default: {label: false}, :url => comfy_blog_comments_path(#cms_site.path, #blog.path, #post.slug) do |form| %>
and also
<%= form.text_field :email, label: false, :class => 'form-control' %>
all to no avail...
ComfortableMexicanSofa is using https://github.com/bootstrap-ruby/rails-bootstrap-forms
So I think you need to do this:
<%= f.text_area :email, hide_label: true %>
Also for those wanting to completely remove the labels from the DOM, here is how to achieve it, according to rails-bootstrap-forms docs you should do the following:
HTML:
<%= form.text_area :content, :class => 'form-control', :rows => 5, placeholder: "Your comment", label_class: "removed-label" %>
CSS:
.removed-label {
display: none;
}
Hope it helps someone down the line.
I can't get Data Abide to validate my fields in a modal (Foundation 5, Simple Form, Ruby on Rails).
Anyone know how to validate fields in a modal with AJAX using data-abide from Foundation?
<%= simple_form_for [current_user, #photo, #tag], id: "tagform", :remote => true do |f| %>
<div class="center semi_padding new_tag_form">
<%= f.input :name , label: "Marca: ", :required => "[a-zA-Z]+" ,input_html: {class: 'marca ipt'} %>
<%= f.input :location, label: "¿Donde lo encontraste?" , input_html: {class: 'ipt'} %>
<%= f.input :price, label: "¿Cuanto te costó?" , input_html: {class: 'ipt'} %>
<%= f.input :coordinate_x , as: :hidden %>
<%= f.input :coordinate_y , as: :hidden %>
<%= f.button :button, "Taggear", type: "button", id:"tp_tag_save", input_html: {class: 'btn-ok icon-favorite-1 button'} %>
<%= f.button :button, "Cancelar", name: "Cancel", id: "tp_tag_cancel", input_html: {class: 'icon-cancel button'} %>
</div>
<% end %>
Add this to your simple_form tag:
html: {novalidate: "novalidate", data: {abide: ''}
EX:
<%= simple_form_for [current_user, #photo, #tag], id: "tagform", :remote => true, html: {novalidate: "novalidate", data: {abide: ''} do |f| %>
Then make sure to throw in a reflow call on the form when the modal is triggered by adding the following JS to the click handler:
$(document).foundation('abide', 'reflow');
I want to check existence of "Name", "Email" input field, but I can't find the method(or function) in parsleyjs.org...
This is my simple-form and parsley code:
<%= simple_form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
<%= render 'devise/shared/error_messages', object: f.object %>
<div class="form-inputs">
<%= f.input :name, required: true, autofocus: true%>
<%= f.input :email, required: true %>
<%= f.input :password, required: true, placeholder: "min. 6 characters",
input_html: {"parsley-minlength" => 6, "error-container" =>"#errorBlock"} %>
<%= f.input :password_confirmation, required: true,
input_html: {"parsley-equalto" => "#user_password"} %>
<%= f.collection_select :role, User::ROLES, :to_s, :humanize %>
</div>
<div class="form-actions">
<%= f.button :submit, "회원 가입" %>
</div>
<% end %>
<%= render "devise/shared/links" %>
<script>
$("#new_user").parsley({trigger: "keyup",
errors: {
errorsWrapper: '<div></div>',
errorTemplate: '<span></span>'
}
});
</script>
If I understand correctly your question looking at the comments, it seems that you want to leverage Parsley validation to check in your database if email or name is already taken and display a Parsley error accordingly.
To achieve that, you'll need to use Parsley Remote plugin, and its documentation here: http://parsleyjs.org/doc/index.html#remote
You'll need to work on your APIs to be able to check backend if these fields values already exist in database, and than integrate parsley.remote.js on top of that.
Best