en en en en id en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en sk es en en en en en en en en fr en en en en en en en en en en en en en en en en en en en en en it en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en tr fr fa en en en en en en en en en en en en pt en en en en en en en
As I stumble through the world of linux, I've decided to log new tricks I learn because I often forget. I decided to share the log because…. eh, why not.
Formatting Numerical Input with Rails
Kubuntu 16.04 GUI Audio Controls not working
Polymorphic Associations The Smart Way: Using Global Ids
Get Firefox to display warning message when exiting multiple tabs
jaehoo on Kubuntu 16.04 GUI Audio Contro…
BennyBeat on How to download a file from so…
fastrapidleech.com on How to download a file from so…
neanderslob on How to download a file from so…
Formatting Numerical Input with Rails
May 6, 2016May 6, 2016 neanderslobcocoon, form, formatting, number, rails, ruby on rails, stylingLeave a comment
Often, forms contain numerical fields for large numbers or monetary values.  In such situations, it’s very useful to format these inputs with javascript (adding commas, dollar signs and so on).  While the javascript is easy enough for this, rails does not like receiving commas or dollar signs in numerical fields.
Typically, one has two options to get rails to play nicely with this:
To add a workaround in the model to scrub out unacceptable characters.
To modify the submit button behavior to use javascript to scrub out those characters immediately prior to form submission.
Each of these strikes has always struck me as a bit cumbersome and intelligent.  Surely this operation is common enough that a plugin of sorts must exist to handle this.  …right?…….
Well I’m glad to tell you that after much searching, I’ve found a gem that does the trick.  It’s called autonumeric-rails and it can be found on github or on rubygems.org.  The Gem uses the autoNumeric jquery plugin to format a numerical input with commas, dollar signs or whatever else you might want.
Here’s how it works:
On top of the jquery plugin it makes the input agreeable with rails by creating a pair of inputs for each field: one visible, one invisible.  The visible one is formatted using the standard jquery plugin, but the invisible one only contains the numerical value of the formatted visible field.  Therefore, upon submitting a form, only the invisible, unformatted field is submitted.
So how do i use it?
Implementing the gem is very simple and it can be used with most of the options from the autoNumeric jquery plugin.  Here’s how:
1.  Add the plugin to your Gemfile and “bundle install”
2.  Make sure that Jquery is “required” in your app and add autonumeric’s javascript file
3.  Add the necessary data attribute to your input field.
This is where the autoNumeric jquery plugin site comes in handy, which has an interactive interface for building the appropriate data attribute based on your needs.  Here are a couple examples.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
view raw _form.html.html.erb hosted with ❤ by GitHub
4.  That’s it, enjoy!
…But wait is it?  Not quite, if you’re adding fields dynamically
Sometimes we want to add fields dynamically (once the page is already loaded).  Many rails developers use the favorite cocoon gem for such a situation.  The autoNumeric gem needs to be refreshed upon the addition of any fields in order for them to be formatted accordingly.  It should also be pointed out that we must use the GEM’S javascript calls and not those of the jQuery plugin.
So for some nested fields in cocoon (as shown below), we add the following javascript.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
view raw _nested_fields.html.erb hosted with ❤ by GitHub
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
view raw additionaljs.js hosted with ❤ by GitHub
Now you’re actually done.  Happy coding!
Formatting Numerical Input with Rails
Privacy & Cookies: This site uses cookies. By continuing to use this website, you agree to their use.