Topic: In Place form editing -- brief how to

Rails can do some awesome stuff with AJAX and make it very simple to do. Here is an example of something I learned the other day from reading Rails Recipes. This assumes you understand how to setup a rails app and do some scaffolding.

Setup a simple rails app such as an address book -- rails Address. Create your table with the relevent information, make sure your table is plural and that you have gone into your database.yml file and make the necessary changes.

Generate your scaffold -- ruby script/generate scaffold Address. Now start up the webbrick server -- ruby script/server. In your browser, go to localhost:3000/addresses and add an entry.

Go to your layouts folder (Address/app/views/layouts/Address) and open addresses.rhtml. In any AJAX app that we are creating you have to add in your Javascript call. So add <%= javascript_include_tag :defaults %> to the header.

Now go to your show file and open it up. (Address/app/views/addresses/show.rhtml) You will see the default scaffolding code; we are going to be removing some of it. First get rid of your edit link. There won't be a link to the edit page because we are going to do editing within in the show file, via la ajax.

We will be adding in a call to the in place editor which will allow us to do as it says, edit in place. Your code for the show file should look like the following:

<% for column in Address.content_columns %>
<p>
  <b><%= column.human_name %>:</b>
  <%= in_place_editor_field :address, column.name %>
</p>
<% end %>


<%= link_to 'Back', :action => 'list' %>

The in_place_editor_field is basically saying that we want to create an editing control for the instance variable @address with the attribute that we are currently on within the loop.

Now, this will almost work as is, but if you try to run it, it will throw an error. We need to add one more line of code, this time in our controller. Open up the addresses_controller.rb file. (Address\app\controllers\addresses_controller.rb) You will see our wonderful scaffold code that is already written for us. Add the following code to the very top of the file, under the "class AddressesController < ApplicationController" call.

Address.content_columns.each do |column|
  in_place_edit_for :address, column.name
end

That's it. Go back to your browser and make sure you are viewing the show.rhtml page. It looks the same still right? Hover over one the entries you put in and you will see the background turn yellow. Click on it and edit it. Click ok, and it will be saved.

Cool stuff, huh? This is something I learned from the Rails Recipe book. It has tons of useful tips and tricks like this.

Re: In Place form editing -- brief how to

And, if you want to add some CSS specifically to the text box in the form, just use this:

.inplaceeditor-form input[type="text"] {
  
}

Re: In Place form editing -- brief how to

So bloomin' easy! Where has Rails been all my life?

Ryan Heneise  |  Art of Mission  |  Now with extra-strong Donor Tools mojo

Re: In Place form editing -- brief how to

ryenski: Right under your nose. smile

Robert: Nice and simple tutorial. Worked like a charm.  Thank you.

Exercise your faith!

Re: In Place form editing -- brief how to

Thanks Yannick.

Ryan, Rails is a dream isn't it.

Re: In Place form editing -- brief how to

The Rails Recipes book also mentions creating Javascript helpers to handle things like in-place editing of select boxes.  It's a great book, and worth taking a look at.

But they that wait upon the Lord shall renew their strength

Re: In Place form editing -- brief how to

great how-to thanks.

How can I make it work with multi line text?  It seems to only work on one line.

Re: In Place form editing -- brief how to

This example is only for text fields. If you wanted to extend this you would have to write your own JavaScript Helper methods. The Rails Recipe book covers this as well.

Re: In Place form editing -- brief how to

Hi,
I am not sure what I am doing wrong here..but this does not seem to be working for me.
I have 2 models Expense and Employee
expense has_may employees
employee belongs to expense

so i am using the following in view and it is currently working fine.

<% if @expense.has_employees? %>
  <h3>Employees</h3>
  <table>
  <% for employee in @expense.employees %>
    <tr>
      <td><%= employee.username %></td>
      <td> Paid => $ </td>
      <td><%= employee.paid %></td>  <!-- how do i insert a in place edit helper for this field, i think i am not using the correct instance variable -->
      <td> Owes => $ </td>
      <td><%= employee.owes %></td>
    </tr>
  <% end %>
  </table>
<% end %>

Can you help me create a helper for the field above where the comment is.
Also my controller is expenses_controller, i'd appreciate if you insert the corresponding controller code here too.

Thank you.

Re: In Place form editing -- brief how to

technaut wrote:

Hi,
I am not sure what I am doing wrong here..but this does not seem to be working for me.
I have 2 models Expense and Employee
expense has_may employees
employee belongs to expense

That seems a bit backwards to me. Did you mean that employees have expenses, and expenses belong to employees?

Ryan Heneise  |  Art of Mission  |  Now with extra-strong Donor Tools mojo