I have a customer contact form in my app which, of course, requires a phone input. I am running Rails 3.2.13 and using Zurb Foundation. I am hoping to find a gem that offers an input mask in the form '(999) 999-9999' that I can call. My data is really local so the US formatted numbers is all that I need.
I am able to perform the validation on the field but wanted to keep the users within the tighter boundaries of an input mask. This is what I have at the moment.
<div class="large-4 columns"><%= f.telephone_field :phone, :placeholder => "Phone - (123) 456-7890" %></div>
Any great gems for this, or perhaps a jQuery plugin that you like?
Cheers!
-Edit
So here is the full answer for what I needed to accomplish. Just in case anyone is looking for a quick fix. This is the code in my _form.html.erb view file:
<div class="large-2 columns">
<%= f.text_field :phone, :id => "phone", :placeholder => "Primary Phone"%>
</div>
Here is the code in my coffee file in my assets/javascripts folder:
$ ->
$("#phone").mask("(999) 999-9999")
You need to download the appropriate jquery.maskedinput.js file from the link #vinodadhikary mentions below. Then you must require the file somewhere below the jquery file in the list of dependencies in your application.js file like so:
//= require jquery
//= require jquery_ujs
//= require foundation
//= require jquery.maskedinput
//= require_tree .
That's about it. If you notice anything amiss, please let me know and I'll edit.
I have been using the plugin http://digitalbush.com/projects/masked-input-plugin and it works pretty well.
I have a lot of fields with different masks so I use this method in my application coffescript.
$( "[data-mask]").each (index, value) ->
element = $(value)
element.mask($(value).data('mask'))
Now I can just set a data-mask attribute on any of my fields::
<%= f.text_field(:phone, data: { mask: '(999) 999-9999' }) %>
I hope this helps someone!
Related
I have some strange behavior happening with bootstrap datepicker in a rails form. I'm using form_for in a partial for edit and new. When editing, the calendar shows perfectly when clicking on the date field but when adding a new record, the calendar is covered over by a dropdown list containing about 6 dates recently entered via the form. The calendar control is also open under the list. I can see the right edge of it. Also, when I move the browser window around or go to another open app and then back to the browser, only the calendar is there...the drop down list disappears. So odd!
I've been searching for a solution for several weeks and have scoured the internet and the datepicker documentation but just can't figure this out. Any guidance appreciated!
Here is the text_field within my form_for.
<div class="field">
<%= f.text_field :visit_date, {"data-provide" => 'datepicker',
"data-date-format" => "yyyy-mm-dd", "data-date-autoclose" =>
"true"} %>
<%= f.text_area :location, placeholder: "Add visit location..." %>
</div>
I have the gem in my gem file as:
gem 'bootstrap-datepicker-rails', '~> 1.8.0'
I have the following in my application.js file:
//= require bootstrap-datepicker
And I have this in my application.css.scss file:
*= require_tree .
*= require_self
*= require bootstrap-datepicker3
*/
one of alternatif solution for your problem is to turned off autocomplete field, you can turned off html autocomplete from previous input with this command below
<%= form_for #your_data , :html => {:autocomplete=> 'off'} do |f| %>
I receive an error wrong number of arguments (given 1, expected 2..3) how can i apply it in a each loop ? I want to be able to edit it inplace in an each loop
<%= best_in_place s.message %>
application.js
//= require jquery_ujs
//= require jquery.purr
user.coffee
jQuery ->
$('.best_in_place').best_in_place()
version best_in_place 3.1.1
OR
Is there a more better way of implementing an inplace editing
best_in_place(object, field, opts = {})
See the arguments the best_in_place method expects to receive. You're passing only one.
object means an object or specific record.
field is the attribute which to edit - in your case it could be message.
options all the options it accepts.
Most probably you need something like:
<%= best_in_place #object, :message, as: :input %>
I am using the best_in_place gem in a project, and i am trying to display a checkbox on it's own place, but i cannot do it. I am searching about it, but i cannot find out the answer anywhere. I just can find people talking about display either "no" or "yes"... Or anything else. But i just want to see the checkbox checked or not.
I am using font-awesome but you can use it also with bootstrap or other images. My solution for displaying checkboxes were simply using the raw method to render a checkbox image (in my case one of the font-awesome icons)
= best_in_place #project,
:active,
:type => :checkbox,
:collection => {false: raw("<i class='icon-check-empty'></i>"), true: raw("<i class='icon-check'></i>")}
And now it looks like the following:
I've managed to make a hack-around using unicode characters ☐ and ☑
<span style='font-size: 1.75em;'>
<%= best_in_place a,
:bool,
:type => :checkbox,
:collection => ["☐", "☑"]%>
</span>
The <span> wrapper helps with choosing the size in this case. This is a short term solution and a checkbox with an AJAX call would definitely be better I guess...
I've forked the original best_in_place gem and modified it with support for displaying an actual, standard HTML checkbox. My fork can be found here: https://github.com/jdashton/best_in_place
In case you're unfamiliar with using gems directly from github, the following line in your Gemfile should do the trick:
gem 'best_in_place', github: 'jdashton/best_in_place'
It's not supported in the current version. However, it's pretty easy to do. Create a checkbox where you need it, and fire an ajax call to the server with some javascript.
Check out this stackoverflow answer for an example.
I'm using rails3-jquery-autocomplete gem to try to complete a form. However, I'm just getting no response whatsoever.
Alright, here it goes:
In my view:
<%= form_tag chats_path do %>
<%= autocomplete_field_tag 'name', '', chats_autocomplete_chat_name_path %>
<% end %>
In my ChatsController:
autocomplete :chat, :name
In my routes:
get "chats/autocomplete_chat_name"
And finally in my application.js:
//= require autocomplete-rails
Although I'm sure the javascript is at least loading, since I put an alert to let me know that autocomplete-rails.js was loading. Any ideas?
Try using chrome -> tools -> developer tools and open up the "networking" tab. Then try again and see if you're form is being sent and if so, what the response is.
I'm not sure if there's a name for this particular kind of UI pattern, but I'd like to create a form that looks like:
Company Name: _____
...
Employees:
Name: _____ Title: _____
Name: _____ Title: _____
Add New Employee
Save Company
I'm creating or editing a company, but embedded in the form are an arbitrary number of "sub-forms" for that company's employees. If I click the Add New Employee button, a new employee sub-form should appear immediately before the button.
I've been away from Rails for a while and I'm still trying to get the hang of how things are done in Rails 3. In the old days, I would've done something like:
button_to "Add Employee", :remote => true, :action => :new_employee_form
and then created new_employee_form.js.erb, which would contain JavaScript that appends the new sub-form to the list of company employees.
But Rails 3 seems to have changed a lot of the plumbing that makes this work and this solution doesn't work at all.
What's the recommended way to implement this pattern in Rails 3?
Make sure you require ujs javascript files in application.js, and that you include application.js in your layout.
//= require jquery
//= require jquery_ujs
//= require jquery-ui
EDIT
Check the resulting html, it should be similar to:
<%= button_to "Create", :action => "create", :remote => true %>
# => "<form method="post" action="/images/create" class="button_to" data-remote="true">
# <div><input value="Create" type="submit" /></div>
# </form>"
method post, class button_to, data-remote true.
Check out these rails casts episodes:
http://railscasts.com/episodes/196-nested-model-form-part-1
http://railscasts.com/episodes/197-nested-model-form-part-2
I use this extensively in my rails apps.
Remote_true must be set in the html_options part of the button_to parameters: http://apidock.com/rails/ActionView/Helpers/UrlHelper/button_to . So the following snipped should work:
button_to "Add Employee", {:action => :new_employee_form} , { :remote => true }
Edit:
Ok, as you just stated, the problem is, that the new form does not get submitted via Ajax. The reason for this is, that you need to attach event handlers to dynamic elements using the ".on" function: http://api.jquery.com/on/