Sterling Rose Design Blog

In my project, I have orders, and each order can have an unlimited number of line_items. Line_items are created by the user clicking on a button, which appends (via RJS) a new row to the line_items tabled form. So far, so good.

But I needed the extended price (quantity * price_per) of each line_item to be calculated every time the user tabbed out or clicked away from the price_per field. Further, I needed the subtotal, tax, total, and balance fields to be automatically re-calculated.

I messed around with it for several hours, trying Javascript, Prototype, and even jQuery, before I finally settled on a Prototype approach that worked. The real struggle was that using Rails 2.3’s nested forms functionality meant that each line_item would have an index key embedded in the middle of the text field’s name and id, and I could not come up with a good way to extract it, to pass it to the Javascript function.

Luckily...

Scenario: Client wants to display a list of users, and the role each user currently has. The user’s role should be the selected option in a select box of all roles. Administrator should be able to update the user’s role by simply selecting a new role from the select box for that user, without having to reload the page.

Approach: Each row in the user’s list should have an id that uniquely identifies it as being associated with that particular user. Each select box should also have an id field associated with the user. Choosing a new role should trigger the onchange event, which executes the update on the role and displays the new user’s row in place, without reloading the entire user list.

Code:

## app/views/users/index.html.erb

 <table>
   <% @users.each do |u| %>
     <tr id='user_row_<%= "#{u.id}" %>'>
       <td><%= link_...