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');
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 am trying to implement froala editor in my rails application but the editor wraps around the textarea and even the label is editable
Here is my form
<%= simple_form_for([:admin, #article], class: 'form') do |f| %>
<%= f.input :title, label: 'Title' %>
<%= f.input :text, id: 'text', as: :textarea %>
<%= f.association :category, label: 'Category' %>
<%= f.association :tags, label: 'Tags' %>
<%= f.input :photo, as: :file %>
<%= f.submit #article.new_record? ? 'Post Article' : 'Update Article', class: 'btn btn-success btn-block btn-medium' %>
and this is the result
Change from f.input to f.input_field
I have this form:
<%= simple_form_for #request, html: {class: 'form-horizontal' } do |f| %>
<%= f.input :initiator, label: 'initiator' %>
<%= f.association :department, collection: Department.all, value_method: :id, label: 'Назначить на отдел' %>
<%= f.association :user, collection: User.all, label_method: :email, label: 'Ответственный' %>
<%= f.input :comment, label: 'comment' %>
<%= f.input :sla, label: 'SLA' %>
<%= f.button :submit, label: 'Создать', class: "btn btn-primary" %>
<% end %>
How can I make the association:
If I choose "Department 1" from: Department, the choice of the :user will only users who belong to this department. (When you open the drop-down list were only people from the Department 1, not Users.all) What parameters I have to pass the rails?
I doubt if it is possible only using simple_form
Try http://www.petermac.com/rails-3-jquery-and-multi-select-dependencies/
I would advice against loading all users in DOM, use an ajax action to filter users if they are many
I am using the following gem in my rails app - https://github.com/TrevorS/bootstrap3-datetimepicker-rails.
My form looks as follows:
<%= simple_form_for([#customer,#job], html: {class:'form-horizontal'}, wrapper: :horizontal_form) do |f| %>
<%= f.input :install, collection: ["Yes", "No"], input_html: {class:'form-control'}, prompt: "Installing?" %>
<%= f.input :delivery, collection: ["Yes", "No"], input_html: {class:'form-control'}, prompt: "Delivering?" %>
<%= f.input :job_tag, input_html: {class:'form-control'} %>
<%= f.input :install_date, :as => :date_picker, input_html: { class: "datepicker"} %>
<%= f.input :box_count, input_html: {class:'form-control'} %>
<%= f.input :cabinet_cost, input_html: {class:'form-control'} %>
<%= f.input :counter_top_cost, input_html: {class:'form-control'} %>
<%= f.input :install_cost, input_html: {class:'form-control'} %>
<br />
<%= f.button :submit, "Create Job", class: "col-md-3 bump-right" %>
<% end %>
When I submit the form I get the following error:
I18n::ArgumentError in Jobs#create
Object must be a Date, DateTime or Time object. "29/08/2014" given.
Does anyone know why this error is thrown and how I fix this?
The column in your database for install_date needs to be a date or datetime type. It looks like you are storing the date as a string instead.
I've built a simple_form form in my rails app and things went just fine:
<%= simple_form_for([#folha, #servico], html: {class: 'well form-horizontal'}) do |f| %>
<%= f.association :pessoa, label: 'Funcionário' %>
<%= f.input :funcao, label: 'Função',collection: #funcoes %>
<%= f.input :modulos, label: 'Módulos', input_html: {class: 'span4'} %>
<%= f.input :valor, label: 'Valor por hora', as: :string ,input_html: {class: 'span1'} %>
<%= f.input :horas, as: :string, input_html: {class: 'span1'} %>
<%= f.button :submit, 'Incluir', class: 'btn btn-primary' %>
<% end %>
To change the order list on the dropdown for the f.association i've overwritten the default .all method in Pessoa.rb:
def self.all
order :nome
end
Then i got this error when trying to render my view:
wrong number of arguments (1 for 0)
Extracted source (around line #5):
2: <h1>Preencher Pagamentos - Folha <%= "#{#folha.mes}/#{#folha.ano}" %> <small> <%= #folha.obs %> </small> </h1>
3: </div>
4: <%= simple_form_for([#folha, #servico], html: {class: 'well form-horizontal'}) do |f| %>
5: <%= f.association :pessoa, label: 'Funcionário' %>
6: <%= f.input :funcao, label: 'Função',collection: #funcoes %>
7: <%= f.input :modulos, label: 'Módulos', input_html: {class: 'span4'} %>
I think its better find a way to order the list in the view. But im very curious about what
is going on...
You should not override those kind of methods in first place.
Here is how to do it with simple_form
f.association : pessoa, :collection => Pessoa.order(:nome).all
https://github.com/plataformatec/simple_form/#associations
You can use default_scope as described here.
Use this macro in your model to set a default scope for all operations on the model.
In your case default_scope order(:nome).