I'm customizing a simple_form gem-enabled form for which I'd like the phone number field to have a datamask from http://jasny.github.com/bootstrap/javascript.html#inputmask
My original code is:
<%= f.input :phone, :required => true,
:input_html => { :maxlength => 14} %>
What is the code required to pass something like into the f.input?
Using something like input_html and label_html doesn't seem to work.
in your form try this:
<%= f.input :phone, :required => true,
:input_html => { :maxlength => 14, :"data-mask" => "999-999-9999" } %>
Also, assuming you're running Rails 3.1+ and you have the jasny files in your vendor/assets/javascripts directory, be sure to include the bootstrap-inputmask file in app/assets/javascripts/application.js:
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require bootstrap-inputmask
//= require_tree .
Related
I am trying to use parsley-rails validation on some forms in my rails app. Problem is that it works perfectly on some forms and doesn't submit on other forms.
I've tried adding required true to all form elements. I have also used different variations of "data-parsley-validate" => true, "data-parsley-validate" => "". Nothing seems to work. Here is the code to the form that works.
= simple_form_for(([#place, #place.reviews.build]), html: {"data-parsley-validate" => true}) do |f|
%p= "Please rate your experience"
.rating-form
%hr
= f.input :comment, input_html: {maxlength: 1000, rows: 10}, label: "Please describe your experience at the location", hint: "Enter a brief description of your experience", error: "You must provide a description for this review.", required: true
%hr
= f.submit "Review this place", :class => "btn btn-primary btn-large"
:javascript
$('.rating-form').raty({
path: '/assets',
scoreName: 'review[rating]'
});
However, I'm unable to submit this form after validation:
= simple_form_for(#place, html: {class: "form-group", "data-parsley-validate" => true}) do |f|
= f.error_notification
.form-inputs
= f.input :name, label: "Please enter the name of your place", hint: "eg. Papa Chris's Pizza.", required: true
= f.label :Select_a_category
%br
= f.collection_select :category_id, Category.all, :id, :name, prompt: "Please choose a category", required: true
%br
= f.input :short_description, label: "Please enter a short description of your place", hint: "eg. Papa Chris's Pizza.", required: true
= f.input :description, as: :trix_editor, input_html: {maxlength: 1000, rows: 10}, label: "Please describe your place", hint: "Enter a brief description of your place", required: true
= f.attachment_field :place_images_files, direct: true, multiple: true
= f.simple_fields_for :locations do |location|
= location.input :address, label: "Please enter the address of your place", hint: "eg. Lumumba Drive", required: true
= location.input :city, label: "Please enter the city of your promotion", hint: "eg. Tema", required: true
= f.input :phone, label: "Please enter your phone number", hint: "eg. 030 412 3123", :input_html => { :maxlength => 10, :"data-mask" => "999 999 9999" }, required: true
= f.input :mobile_number,label: "Please enter your mobile number", hint: "eg. 020 111 2222", :input_html => { :maxlength => 10, :"data-mask" => "999 999 9999" }, required: true
= f.input :website,label: "Please enter your website", hint: "eg. papajohns.com"
.form-actions
= f.button :submit, class: "btn btn-large btn-primary"
Here is my application.js file:
//= require rails-ujs
//= require jquery3
//= require jquery-ui
//= require ./jquery.raty.js
//= require jquery.timepicker.js
//= require jquery-mask-plugin
//= require jquery.slick
//= require parsley
//= require refile
//= require trix
//= require popper
//= require bootstrap-sprockets
//= require leaflet
//= require dropzone
//= require underscore
//= require masonry/jquery.masonry
//= require_tree .
My application.css
*= require leaflet
*= require 'masonry/transitions'
*= require_tree
*= require_self
*= require trix
*= require jquery-ui
*= require jquery.timepicker.css
*= require dropzone/dropzone
*= require parsley
*/
Nothing shows in the console and web inspector. The submit button just won't work.
Apparently Trix is triggering parsley validation on a disabled input. See this Trix issue. The solution is to add
'data-parsley-excluded="[disabled]"
to your form, like this:
<form data-parsley-validate data-parsley-excluded="[disabled]">
<trix-editor></trix-editor>
<input type="submit">
</form>
i recendly add a gem tinymce and i did all the step that the page tell me but the result was a loooong string and i really don t know why, here i put my codes:
i create a tinymce.yml file with this:
default:
plugins:
- image
- link
alternate:
selector: textarea.table-editor
toolbar: styleselect | bold italic | undo redo | table
plugins:
- table
then i add the following sentence in applications.js:
// about supported directives.
//
//= require jquery3
//= require popper
//= require rails-ujs
//= require turbolinks
//= require jquery3
//= require popper
//= require bootstrap
//= require jquery.validate
//= require.validate.additional-methods
//= require tinymce
//= require turbolinks
//= require_tree .
S(document).ready(function(){
S('#new_user').validate({
rules {
'user[email]': {
required:true,
email:true,
},
'user[password]': {
required:tree,
minlength:1
},
'user[password_confirmation]': {
required:true,
equalTo: '#user_password',
}
},
})
})
and in the view i put the following:
<div class="field">
<%= form.label :content %>
<%= form.text_area :content, id: :publication_content, :rows => 10, :cols => 10,
:class => "tinymce" %>
</div>
<div class="actions">
<%= form.submit %>
</div>
<%= tinymce %>
<% end %>
in all the case here is my database:
class CreatePublications < ActiveRecord::Migration[5.1]
def change
create_table :publications do |t|
t.string :title
t.references :city, foreign_key: true
t.string :content
t.timestamps
end
end
end
and this is what is showing me the page instead of the link and the imagen:
so i really don t know what can i do.
You have to call .html_safe on strings with html tags that you want to be HTML tags on the rendered view, otherwise ActionView scapes the tags and the browser shows them as text. You are not showing the view with the problem though, but a .html_safe on both lines should work.
admin.scss
/*
*= require bootstrap
*= require summernote
*/
active_admin.js.coffee
#= require jquery
#= require bootstrap
#= require summernote
$ ->
$('[data-provider="summernote"]').each ->
$(this).summernote()
height: 280
enter code here
post.rb
form do |f|
f.inputs 'Blog Post' do
f.input :title
f.input :featured_image
f.input :body, input_html: { 'data-provider' => "summernote"}
f.input :user_id, as: :hidden, input_html: {value: current_admin_user.id}
end
f.actions
end
I managed to run the summernote-rails in the activeadmin, but the button and options are all over the page. style for the summernote-rails is not working properly. how can i solve this?
My guess is you need to wrap the css in body.active_admin, see for example Getting select2 to work with active admin
I'm trying to style checkboxes in my rails app.
<div class="form-group">
<%= f.label :tag_list %>
<p>Science</p>
<%= f.check_box :tag_list, { :multiple => true }, 'science', nil %>
<p>Math</p>
<%= f.check_box :tag_list, { :multiple => true }, 'math', nil %>
</div>
In my application.js
//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require jquery-ui/button
//= require jquery-ui/datepicker
//= require jquery-ui/slider
//= require jquery-ui/spinner
//= require jquery-ui/tooltip
//= require jquery-ui/effect
//= require flatuipro
//= require flat-ui.min
//= require sweet-alert-confirm
//= require turbolinks
//= require_tree .
$(':checkbox').radiocheck();
I'm using something called flat-ui and am trying to apply the styles they provide for check boxes. How do I do this?
Looking at the documentation, it seems like the class checkbox needs to be given to the label, and the input needs to be inside the label. Your markup would then look something like this:
<div class="form-group">
<%= f.label :tag_list, class: 'checkbox' do %>
<p>Science</p>
<%= f.check_box :tag_list, { multiple: true }, 'science', nil %>
<% end %>
</div>
Then, make sure you are calling $(':checkbox').radiocheck(); in your JavaScript, and that you have included the Flat-UI js file.
Update from chat:
Make sure that each input has its own label:
<div class="form-group">
<%= f.label :tag_list, class: 'checkbox' do %>
<p>Science</p>
<%= f.check_box :tag_list, { multiple: true }, 'science', nil %>
<% end %>
<%= f.label :tag_list, class: 'checkbox' do %>
<p>Math</p>
<%= f.check_box :tag_list, { multiple: true }, 'math', nil %>
<% end %>
...
</div>
Also make sure that the JavaScript isn't called until the page has finished loading:
// application.js
$(function() {
$(':checkbox').radiocheck();
});
You need the radiocheck js file:
You can download the js file: radiocheck.js
Include radiocheck.js file in app/assets/javascripts folder.
Add this line in your application.js and the file will look like this:
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require flat-ui.min
//= require radiocheck
//= require_tree .
$(function(){
$(':checkbox').radiocheck();
});
I'm creating a simple sign_up form for new users on my site. I have ran the install for simple_form bootstrap...
rails g simple_form:install --bootstrap
However, it's still not showing up and rendering as a normal simple_form.
Here is my form code:
<h2>Sign up</h2>
<%= simple_form_for(resource, :as => resource_name, :url => registration_path(resource_name ), :html => {:class => 'form-horizontal' }) do |f| %>
<%= f.error_notification %>
<%= f.input :username, :required => true, class: "form-control"%>
<%= f.input :first_name, :required => true, class: "form-control" %>
<%= f.input :last_name, :required => true, class: "form-control" %>
<%= f.input :twitter, class: "form-control", type: "text", placeholder: "Username" %>
<%= f.input :bio, class: "form-control" %>
<%= f.input :email, :required => true, :autofocus => true, class: "form-control" %>
<div class="form-actions">
<%= f.button :submit, "Sign up", class: "btn btn-primary btn-sm" %>
</div>
<% end %>
<%= render "devise/shared/links" %>
Not sure what I'm doing wrong here. Thanks in advance.
The sample application here mentions how you need to download Bootstrap separately (they use curl) and place it in vendor/assets/stylesheets/bootstrap.css.
Please try that.
It sounds like Bootstrap is not installed in your application or maybe you are trying to use Bootstrap 3. At the time I typed this on 2013-10-13, Simple Form did not support Bootstrap 3. See here for more details.
So that means you need to add Bootstrap 2.x to your application and Vidya has provided some good direction already.
If you are interested in using a gem to add Bootstrap 2.x, then I've provided instructions for twitter-bootstrap-rails below. Be sure to review their readme as well in case I omitted something.
In your gemfile add:
gem "twitter-bootstrap-rails", :git => 'git://github.com/seyhunak/twitter-bootstrap-rails.git'
Then at the rails console for your project run (I've assumed you want less support):
bundle install
rails generate bootstrap:install less
Depending on whether you want a fixed or static layout use one of the two lines below:
rails g bootstrap:layout application fixed
rails g bootstrap:layout application fluid
Finally, edit your application.css file (found in app/assets/stylesheets) so it has 'require bootstrap_and_overrides similar to the example below:
*= require_self
*= require bootstrap_and_overrides
*= require_tree .
I'm pretty sure this happens by default now but you might also want to confirm that you have 'require twitter/bootstrap in your application.js as well (found in app/assets/javascripts). An example from a project of mine is below:
//= require jquery
//= require jquery_ujs
//= require twitter/bootstrap
//= require turbolinks
//= require_tree .
If it still doesn't work and you added this gem. Kindly let me know what version of ruby, rails, simple_form and twitter-bootstrap-rails you are using.