Formatting Numerical Input with Rails

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:

  1. To add a workaround in the model to scrub out unacceptable characters.
  2. 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

//= require jquery
//= require autonumeric

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.

<%= form_for @model do |f| %>
<%= f.text_field :decimal, label: "Just a number with commas and 2 decimal places", data: {autonumeric: true} %>
<%= f.text_field :dollaz, label: "Standard monitary input", data: {autonumeric: {aSign: '$ ', mDec: 2}} %>
<%= f.text_field :integer, label: "Just an integer with commas", data: {autonumeric: {mDec: 0}} %>
<%= f.text_field :posInt, label: "Positive integer with commas", data: {autonumeric: {vMin: 0}} %>
<%= f.text_field :posDec, label: "Positive decimal with commas and two decimal places", data: {autonumeric: {vMin: 0.00}} %>
<% end %>

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.

<div class="nested-fields">
<%= form_for @model do |f| %>
<%= f.text_field :decimal, label: "Just a number with commas and 2 decimal places", data: {autonumeric: true} %>
<%= f.text_field :dollaz, label: "Standard monitary input", data: {autonumeric: {aSign: '$ ', mDec: 2}} %>
<%= f.text_field :integer, label: "Just an integer with commas", data: {autonumeric: {mDec: 0}} %>
<%= f.text_field :posInt, label: "Positive integer with commas", data: {autonumeric: {vMin: 0}} %>
<%= f.text_field :posDec, label: "Positive decimal with commas and two decimal places", data: {autonumeric: {vMin: 0.00}} %>
<% end %>
</div>
$('div#dynamic').on('cocoon:after-insert', function(e, insertedItem) {
$(document).trigger('refresh_autonumeric');
});
view raw additionaljs.js hosted with ❤ by GitHub

Now you’re actually done.  Happy coding!

 

Advertisement
Formatting Numerical Input with Rails

Polymorphic Associations The Smart Way: Using Global Ids

Global IDs have previously been a feature of rails with the help of a gem but as of Rails 4.2, it’s officially baked into the platform.  I just recently used the new addition to create polymorphic associations within an app and I have to say, it’s fantastic.  I did, however, find very little help out there for first-time users of this feature so here’s a few notes on how to do it.

What is a global id

Global Id is a library that produce Uniform Resource Identifiers (URIs) for any piece of data you’d like. They tend to look something like this:
gid://name-of-app/Person/1

Global IDs have previously been a feature of rails with the help of a gem but as of Rails 4.2, it’s officially baked into the platform.  I just recently used the new addition to create polymorphic associations within an app and I have to say, it’s fantastic.  I did, however, find very little help out there for first-time users of this feature so here’s a few notes on how to do it.

What is a global id

Global Id is a library that produce Uniform Resource Identifiers (URIs) for any activerecord object. They tend to look something like this:
gid://name-of-app/Person/1

So global IDs allow all of this information to be expressed in a single string very quickly.  With a couple methods in the model we can use this to create a polymorphic association.

Cool, so how do I make this happen?

Let’s pretend that we want to set up an association to indicate whether a Stockholder is a Person or a Company.

First, we need to generate our stockholder model

We will need two columns: entity_id and entity_type. Just like in the standard polymorphic association, the latter stores the model name, the former stores the id within that model.  We can generate both with a single line in our migration as follows:

class CreateStocholders < ActiveRecord::Migration
def change
create_table :optionees do |t|
t.date :grant_date
t.integer :shares_outstanding
t.belongs_to :option, index: true, foreign_key: true
t.references :entity, polymorphic: true, index: true
t.timestamps null: false
end
end
end

Next, we set up our models to indicate a polymorphic relationship

Company Model:
class Company < ActiveRecord::Base
has_many :stockholders, as: :entity
end

Person Model:
class Person < ActiveRecord::Base
has_many :stockholders, as: :entity
end

Stockholder Model:
class Stocholder < ActiveRecord::Base
belongs_to :entity, polymorphic:true
end

In the above case, :entity is just catch-all field that represents people and companies. Of course, you can call yours whatever you’d like.

Now we can set up our form for the stockholder

I use simple_form but the principle is the same for other methods; adjust your syntax accordingly. Something like this.

...
<%= f.grouped_collection_select :entity_id, [Company, Person], :all, :model_name, :to_global_id, :email %>
<%= f.input :issue_date, label: false %>
<%= f.input :shares_issued, label: false %>
...

So obviously, the exciting part here is the grouped_collection_select which will render a nice select menu with both companies AND people in it.

To break it down:

  • This is a grouped collection for a client
  • Over the models Company and Person
  • It will use all of the records in each model
  • and group them according to their model_name.
  • It will use the global_id to get the values
  • and display the email of each in the menu

The above will give you a grouped selector similar to the one shown below (note I used Org instead of Company, but you get the idea).
groupedDropdown

But you might rightly ask: “Why did you use email addresses and not names?”  The tricky thing about these sorts of associations is that people have both a first name and a last name where companies just have a name.  In order to get names to render in such a situation, you will need to use a lambda, which I’ll go over at the end of the post.

Making Global Ids work with Polymorphic Associations

If you’ve been keeping track though you should see that we have created two key problems for integrating the global id with polymorphic associations:

  1. We need :entity_type as well as :entity_id
  2. :entity_id needs to be an integer, not a string as is a global id.

So, to rephrase the situation, we need to break the global id into two pieces:

  1. Its model name (a string)
  2. Its id for that model (an integer)

Fortunately we don’t need to do this manually, rails polymorphic associations will store the model name and id automatically if it knows which object to reference.  Therefore, we specify getter/setter methods to specify the object, using global ids.

So, editing the Stockholder model again:

class Stocholder < ActiveRecord::Base
belongs_to :entity, polymorphic:true

def global_entity
self.entity.to_global_id if self.entity.present?
end

def global_entity=(entity)
self.entity=GlobalID::Locator.locate entity
end
end

Then change the grouped_collection_select to:
<%= f.grouped_collection_select :global_entity, [Company, Person], :all, :model_name, :to_global_id, :email %>
<%= f.input :issue_date, label: false %>
<%= f.input :shares_issued, label: false %>

Then just be sure to add :global_entity to your strong params and that’s it!

 

Using the lambda for names

Ok, often when doing polymorphic associations, one will use different pieces of information as keys for the two different models (after all, they’re not always going to have the same columns, right?)  In such a case, we use a lambda, making our select like this:
<%= f.grouped_collection_select :entity_id, [Company, Person], :all, :model_name, :to_global_id, lambda {|company_or_person_object| company_or_person_object.instance_of? Company? rescue company_or_person_object.fname + " " + company_or_person_object.lname rescue company_or_person_object.name}, label:"Stockholder", class: "names"%>

As an explanation of lambdas is a bit beyond the scope of this tutorial, I’ll just leave you with the example above.  There is plenty of documentation available out there on the matter so if the lambda’s confusing, just google it up.

Anyway, that’s it; you’re done!

 

Polymorphic Associations The Smart Way: Using Global Ids

Adding a devise user or admin in a Heroku app

To add a devise user on a Heroku site we combine two commands

Command 1: With devise a person can enter the following into their rails console to create a user: User.new(:email => "user@name.com", :password => 'password', :password_confirmation => 'password')

Command 2: To run commands in the Heroku terminal, simply go into local directory of the corresponding app and type heroku run [whatever you want to run]

So if we put those together we get the following, assuming that your user model is in fact called User:

    1. Change your directory to your app: cd ~/yourapp
    2. Enter into the rails console on Heroku with the following: heroku run rails c
    3. Run the create user code: U=User.new(:email => "user@name.com", :password => 'password', :password_confirmation => 'password')
    4. Then finally U.save

Finally, if you want to do this for a separate admin model, simply replace User in the instructions above with Admin (provided of course that’s what your separate admin model is called; if not adjust accordingly).

That’s it! You should be good to go!

Adding a devise user or admin in a Heroku app

Styling Fields Dynamically Added With Cocoon

I recently ran into a situation where I realized that the nice slick J-Query styling that I’d given to my select menus hadn’t carried over to my dynamically added fields.  This is because, my javascript ran $('select').customSelect(); when the page loaded but at no point after. I therefore needed to figure out how to trigger that function once a dynamic field was added.

After quite a bit of searching around (on the order of hours) and several dead ends, I finally learned that cocoon has many different actions that can be used with on() In my case, all I needed was the following:
$('#test').on("cocoon:after-insert", function(e, added_item){
added_item.find('select').customSelect();
});

And I was good to go.

Styling Fields Dynamically Added With Cocoon

Controller Cheat Sheet

Common in index method

Get all posts and save them to @post, ordered by when they were creating in descending order:

@post = Post.all.order("created_at DESC")

Get all posts by a particular user and save them to @post, ordered by when they were creating in descending order:
@post = current_user.posts("created_at DESC")

Common in new method

Create a new post for the current user when that user has_many posts:

@post = current_user.posts.build

Create a new post for the current user when that user only has_one post:

@post = current_user.build_post

To authorize which users can access what

See my post here.

Controller Cheat Sheet

Setting Up Mailer Using Devise For Forgot Password

Really cleared up my confusion about sending email in both development and production environments.

Ruby on Rails Help

In this tutorial I will show you how to set up the mailer for the forgot password feature in Devise. In the tutorial I will be setting up a Gmail account and I will show you how its done using local environment variables. I will also be using Heroku and Foreman to set up environment variables.

I am using Rails 4 and Devise 3 for this tutorial.

Seting Up Development Environment

First we will set up the development mailer for use on your local machine. In “config/environments/development.rb” you should already have included

config.action_mailer.default_url_options = { :host => 'localhost:3000' }

when you installed devise.

Next you should turn on the option to raise an exception if there is an error when sending an email. You can do this by including

config.action_mailer.raise_delivery_errors = true

in the same file. Next we will add the email delivery method. You should leave the values as…

View original post 672 more words

Setting Up Mailer Using Devise For Forgot Password

Notes: Adding themes to rails app

To add themes to a rails app

  • Drop respective css and javascript files into appropriate directory under vendor/assets/.
    Note: Files should have unique name (I name them after the theme so flatty-theme/css/style.css simply becomes flatty.css.
  • Add the following code to your config/application.rb under # add custom validators path in the Application class

    config.assets.paths << "#{Rails.root}/vendor/assets/*"
    config.assets.paths << "#{Rails.root}/vendor/assets/fonts"
    config.assets.paths << "#{Rails.root}/vendor/assets/stylesheets"
  • Adjust whatever views you’re using to use the appropriate classes in your theme

…And that’s it!

Notes: Adding themes to rails app

How to Override and Customize the Devise Controller in Rails

Was an absolute lifesaver when I was trying to add additional registration information to my sign-up page.

How I Learned Ruby on Rails

Judging by the number of different StackOverflow questions, there are a lot of people trying to do this, and a lot of confusion. Here is how I did it, and hopefully it helps you.

I have a User and a Verifier model.  What I want to do is create a new Verifier every time I create a new user, and pass in the user.id for the User into the verifier.user_id so that they are mapped together.

In order to do this I want to not really override but add additional functionality to the existing devise controller that handles when new users are created (and destroyed).  So I need to access the RegistrationsController#Create function in devise.

First thing is to create a new folder in the ‘app/controllers‘ folder where we can put my custom controller.  I called mine ‘app/controllers/my_devise‘.  Then create a new file in this folder…

View original post 534 more words

How to Override and Customize the Devise Controller in Rails