On-the-spot is a Rails3 compliant unobtrusive javascript in-place-editing plugin, using jEditable.

As this jEditable depends on jQuery, you have to install that first. How to setup a fresh rails3 site with jquery is explained in this post. In short it is easy:

    gem "jquery-rails"

Run the installation task:

    rails g jquery:install


Inside your Gemfile add the following:

    gem "on_the_spot"

Run the installation task:

    rails g on_the_spot:install

Inside your `routes.rb` you need to provide the following route:

    resources :posts do
      collection do
        put :update_attribute_on_the_spot

You need to do this for each controller that uses the on-the-spot editing (in this example for the PostsController).

For the moment i do not know of any better solution, but i am always open for suggestions!

Inside your application.html.haml you will need to add below the default javascripts:

    = javascript_include_tag :on_the_spot

or using erb, you write

    < %= javascript_include_tag :on_the_spot %>

That is all you need to do to start using it!


Inside your controller you write:

    class YourController < ApplicationController


      ... leave the rest of your controller alone ...


And inside your view you will have to specify the fields you want to be “editable” :

    Username: <%= on_the_spot_edit @user, :name %>

It should be as simple as that :)

Detailed options

The on_the_spot_edit also accepts options:

  • :type : :textarea or select (none means default edit)
  • :ok_text : the text for the ok-button
  • :cancel_text : the text for the cancel-button
  • :tooltip : the tooltip-text
  • :rows : for textarea, the number of rows, defaults to 5
  • :columns : for textarea, the number of columns, defaults to 40
  • :data : for select, the lookup-data, should be in an array of id-value pairs. E.g. [[1, 'ok'], [2, 'not ok'], [3, 'not decided']].

For the texts: if a text is not specified, the default is taken from the `on_the_spot.en.yml` (or your current language).


Edit field

    < %= on_the_spot_edit @user, :name %>


    < %= on_the_spot_edit @user, :description, :type => :textarea, :rows => 10, :columns => 55 %>


    < %= on_the_spot_edit @user, :rating, :type => :select, :data => [[1, 'good'], [2, 'mediocre'], [3, 'bad']] %>

Example project

There is an example rails3-project called on_the_spot_tester, where this is demonstrated in action.

Let me know what you think.