Take the 2-minute tour ×

Preface: I'm new to Rails. Also kind of new to JQuery and json. I am currently rendering html from my controller as such:

def new
  @customer = Customer.find(params[:id])

I'm using that @customer instance to set my form fields. I also have on that form two select helpers:

<%= select(:customer, :billing_type_id, BillingType.all.map{ |lk| [lk.name, lk.id] })%>
<%= select(:customer, :account_id, Account.all.map{ |lk| [lk.number, lk.id] }) %>

Both select lists are bound to my customer model. The BillingType model belongs_to Account. Upon selecting a BillingType, I want to auto select the related Account. The user is allowed to choose an account other than the default which is why both are on the Customer model. The purpose of auto selecting the Account is purely a convenience to the user.

My first idea was to somehow return BillingType.all.to_json as part of the new action from my controller. Then, if that json is available at the client, I can parse it and wire a change event in JQuery to choose the default Account when BillingType is selected.

So my question is really in two parts:

  1. What is the rails way to accomplish setting a related select option?

  2. Regardless of what the right way is to accomplish my goal, I'm now curious as to how to return json AND html at the same time from a controller action. I don't really think that I want to make an ajax request from my document load event as this will require a round trip to the server. Is there a way to simply render all BillingTypes to a tag as json such that I can reference it with JQuery and parse the json? I feel like I want to do something like this:

In jquery:

var obj = jQuery.parseJSON($("#billingtypes"));

In view:

<span id="billingtypes"><%= BillingType.all.to_json %></span>

I may have this all wrong, but will very much appreciate understanding how to handle my two issues.

share|improve this question

1 Answer 1

up vote 0 down vote accepted

One approach is indeed to materialise the billing types in your page.

something along the lines of

var billingTypes = <%= BillingType.all.to_json %>;

in a script tag on your page will create a javascript variable with that info. No parsing required!

Another approach would be to add data attributes to the option tags, i.e. change your select tag to

<%= select(:customer, :billing_type_id, BillingType.all.map{ |lk| [lk.name, lk.id, :'data-account-id' => lk.default_account_id] } %>

I'm assuming here that your billing types have a default_account_id method/attribute that returns the id of the Account to use. I've attached the id of the account to select to the individual option tags, and then you can do something like

  var accountId = $(':selected', $(this)).data('account-id');
 // do something cool with accountId
share|improve this answer
The option tag is great, I didn't realize you can do that- and it totally solves my issue! Also, simply rendering the BillingType json directly in the script tag works. I want to test out the option tag idea, and then I'll mark this as an answer. –  Joshua Harris Dec 22 '11 at 2:21
Frederick- I tested the option tag and it worked, thanks for your answer! –  Joshua Harris Dec 22 '11 at 14:44
For anyone who reads this, there is a minor modification needed to the javascript: $('#returned_check_billing_type_id').change(function(){ var accountId = $(':selected', this).attr('account-id'); alert(accountId); // do something cool with accountId }); –  Joshua Harris Dec 23 '11 at 14:43

Your Answer


