Wrap up the excellent autoNumeric.js javascript library
autoNumeric is a jQuery plugin that automatically formats currency (money) and numbers as you type on form inputs. It supports most International numeric formats and currency signs including those used in Europe, North and South America, Asia and India (lakhs**).
autoNumeric.js github repository and documentation [https://github.com/BobKnothe/autoNumeric] (https://github.com/BobKnothe/autoNumeric)
autoNumeric.js home page and settings generator [http://www.decorplanit.com/plugin] (http://www.decorplanit.com/plugin)
The autonumeric-rails simply wrap up autoNumeric.js and in addition provides ujs flavor to autoNumeric.js
Add this line to your application's Gemfile:
gem 'autonumeric-rails'
And then execute:
bundle
Then add in your javascript.js
manifest:
//= require jquery
//= require autonumeric
If you prefer using version 1.9.46 instead of 2.x version, replace require autonumeric
by require autonumeric1
in your javascript manifest.
Simply add data-autonumeric
attribute to your HTML tag to initialize autoNumeric
with its default values:
<%= form_for @model do |f| %>
<%= f.text_field :field, data: {autonumeric: true} %>
<% end %>
You can also pass autoNumeric configuration parameters directly with a Hash in your HTML tag:
<%= form_for @model do |f| %>
<%= f.text_field :field, data: {autonumeric: {aSign: 'USD ', mDec: 0}} %>
<% end %>
See autoNumeric page for all details on configuration and options.
autonumeric-rails looks for ajaxComplete
events which are trigger by jQuery every time an Ajax request finishes.
As a result, rails-ujs elements (i.e. data-remote
elements) automatically initialize autonumeric fields after the AJAX request is complete.
When a Javascript function generate and add to the DOM new fields with autonumeric attributes, you must manually refresh in order to initialize those new fields.
To do so you must trigger the refresh_autonumeric
event on document
after you modified the DOM:
$(document).trigger('refresh_autonumeric');
You can disable autonumeric-rails and autoNumeric from an object and turn it back into a simple input element by calling
AutonumericRails.delete_autonumeric_object
and passing the targeted jQuery object to it:
var element = $("#field");
AutonumericRails.delete_autonumeric_object(element);
Note: This will not un-sanitize the field's value, and you must do it manually.
Autonumeric-rails creates in the DOM an hidden input with the same name as the text field.
On each modification of the text field value (on keyup
and blur
events), the hidden input is updated with the sanitized value.
When validating the form, the hidden field value is sent to the server as it is located after the text field in the DOM.
For a full list of change, see the CHANGELOG.md file
Update autoNumeric v 2.0. The previous version 1.9.46 is still available for compatibility.
Add class method delete_autonumeric_object
to disable autonumeric-rails and autoNumeric attributes from an object
Bind on ajaxComplete
event, so each jQuery ajax event automatically refresh autonumeric fields. Manually triggering refresh_autonumeric
is not necessary for rails-ujs (i.e data-remote
) anymore
Implement refresh_autonumeric
event on document
for manual update after the DOM has been modified
First attempt to implement automatic refresh of autonumeric fields using DOMNodeInserted
.
This was not cross-browser compatible and was quickly reverted
- Fork it
- Create your feature branch (
git checkout -b my-new-feature
) - Download firefox ESR in a directory of your choice (do not need to be your main firefox install). Create the file <gem_dir>/spec/firefox_path and fill it with the full path of firefox executable
- Commit your changes (
git commit -am 'Add some feature'
) - Push to the branch (
git push origin my-new-feature
) - Create new Pull Request