I love Ajax.InPlaceEditor, cause it allows me quickly edit a field by just clicking on the text value. If you have used Flickr, I am pretty sure you know what I meant.

It is easy to create an in-place-editor if you are using Ruby On Rails (RoR).

  # Controller
  class BlogController < ApplicationController
    in_place_edit_for :post, :title
  end

  # View
  <%= in_place_editor_field :post, 'title' %>

Problem

The problem with InPlaceEditor is when you enter an empty value, you lost the text where you can click to edit.

One way is to extend Ajax.InPlaceEditor to display “click to edit…” text if the value is empty.

But on some cases, that is not what you want. For example if the text field is a numeric value, you would want your model class to peform the ActiveRecord validation and display the validation message if user enters an invalid value. And you probably would not want to re-code the validation rules in Javascript.

Solution

This is a hack that extends ActiveController::Base to include an additional class method in_place_edit_with_validation_for, which basically displays an alert box containing the model error messages is it is not valid.

And this is how you go about doing it:

1. Create custom_in_place_editing.rb and save it in [app_root]/lib directory.

   module ActionController
     module Macros
      module CustomInPlaceEditing
       def self.included(base)
        base.extend(ClassMethods)
       end
      
       module ClassMethods
        def in_place_edit_with_validation_for(object, attribute)
         define_method("set_#{object}_#{attribute}") do
          klass = object.to_s.camelize.constantize
         @item = klass.find(params[:id])
         @item.send("#{attribute}=", params[:value])
          if @item.save
           render :update do |page| 
            page.replace_html("#{object}_#{attribute}_#{params[:id]}_in_place_editor", 
            @item.send(attribute))
           end
          else
           render :update do |page|
            page.alert(@item.errors.full_messages.join("\n"))
            klass.query_cache.clear_query_cache if klass.method_defined?:query_cache
            @item.reload
            page.replace_html("#{object}_#{attribute}_#{params[:id]}_in_place_editor", 
            @item.send(attribute))
           end
          end
         end
        end
       end
      end
     end
   end
   
   ActionController::Base.class_eval do
     include ActionController::Macros::CustomInPlaceEditing
   end
   

2. Update the following files accordingly:
   

      # Controller file
      class ProductController < ApplicationController
        in_place_edit_with_validation_for :product, :price
      end
      
      # View file, remember to set the :script option to true
      # Rails 1.2.3
      <%= in_place_editor_field :product, :price, :script => true %>
   
      # Rails on edge
      <%= in_place_editor_field :product, :price, {}, :script => true %>
   
      # [app_root]/config/environment.rb 
      require 'custom_in_place_editing'
   

3. Restart your server instance.

And that’s it, there is no other step, you are done.