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: [ruby] gem "jquery-rails" [/ruby] Run the installation task: [ruby] rails g jquery:install [/ruby]
Inside your Gemfile add the following: [ruby] gem "on_the_spot" [/ruby] Run the installation task: [ruby] rails g on_the_spot:install [/ruby] Inside your routes.rb you need to provide the following route: [ruby] resources :posts do collection do put :update_attribute_on_the_spot end end [/ruby] 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: [ruby] = javascript_include_tag :on_the_spot [/ruby] or using erb, you write [ruby] < %= javascript_include_tag :on_the_spot %> [/ruby] That is all you need to do to start using it!
Inside your controller you write: [ruby] class YourController < ApplicationController can_edit_on_the_spot ... leave the rest of your controller alone ... end [/ruby] And inside your view you will have to specify the fields you want to be "editable" : [ruby] Username: <%= on_the_spot_edit @user, :name %> [/ruby] It should be as simple as that :)
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).[ruby] < %= on_the_spot_edit @user, :name %> [/ruby]
[ruby] < %= on_the_spot_edit @user, :description, :type => :textarea, :rows => 10, :columns => 55 %> [/ruby]
[ruby] < %= on_the_spot_edit @user, :rating, :type => :select, :data => [[1, 'good'], [2, 'mediocre'], [3, 'bad']] %> [/ruby]
There is an example rails3-project called on_the_spot_tester, where this is demonstrated in action. Let me know what you think.On-the-spot is a Rails3 compliant unobtrusive javascript in-place-editing plugin, using jEditable.
Inside your Gemfile add the following: [ruby] gem "on_the_spot" [/ruby] Run the installation task: [ruby] rails g on_the_spot:install [/ruby] Inside your routes.rb you need to provide the following route: [ruby] resources :posts do collection do post :update_attribute_on_the_spot end end [/ruby] 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: [ruby] = javascript_include_tag :on_the_spot [/ruby] or using erb, you write [ruby] < %= javascript_include_tag :on_the_spot %> [/ruby] That is all you need to do to start using it!
Inside your controller you write: [ruby] class YourController < ApplicationController can_edit_on_the_spot ... leave the rest of your controller alone ... end [/ruby] And inside your view you will have to specify the fields you want to be "editable" : [ruby] Username: <%= on_the_spot_edit @user, :name %> [/ruby] It should be as simple as that :)
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).[ruby] < %= on_the_spot_edit @user, :name %> [/ruby]
[ruby] < %= on_the_spot_edit @user, :description, :type => :textarea, :rows => 10, :columns => 55 %> [/ruby]
[ruby] < %= on_the_spot_edit @user, :rating, :type => :select, :data => [[1, 'good'], [2, 'mediocre'], [3, 'bad']] %> [/ruby]
There is an example rails3-project called on_the_spot_tester, where this is demonstrated in action. Let me know what you think.
Comments
bundler installed 15 gems and I saw on_line_editing of the post) Helpful project, thx. But it will be better if elements location stands still. rest_in_place plugin work good for rails 2.3.4(do not now about 3.0)
get :update_attribute_on_the_spot in routes should be post :update_attribute_on_the_spot ?
@Holin: you are right. Corrected my typo. Thank you for mentioning that.
Hey man! nice article, I'd been trying to find out how to do it on rails 3 and finally found it ;). I have a question tho, I'm building a website for non technical persons, and I'm guessing it's gonna be kinda hard to understand that the mouse over means that they can edit. I would like to use a tiny nice edit button instead. What do you recommend? Thks in advance
@Maho i think that the hover becomes clear during use. But I think your suggestion to use an edit-button is a valid one. I will check how that could be done. I do believe, if you have a lot of fields, it could make the screen seem cluttered, with a button for each field. But could be useful in some cases.
You're right, thinking deeply, as you say, in some cases could result in a bunch of buttons. Thks anyway for reply.
You may want to explain that you also need to include the JQuery library in your javascript includes in order for the script to work. This may seem obvious to most of you but for someone such as myself, who hasn't worked much with JQuery, it took me the better part of an hour to figure out that I needed to do that in order to get it working. I actually thought the plugin was broken for rails 3 and I was about to give up! This site saved me: http://joshhuckabee.com/jquery-rails-3 A simple explanation of that in your installation instructions would be helpful IMHO.
Thank you for the hint. I will update the post. I have described how to install jquery in rails3 in this post: http://www.dixis.com/?p=307, so i assumed this was well known already.
@Nathan I actually managed to get it to work without installing the jquery-rails gem. I simply put these lines on the top of my .erb file where I wanted to use the gem: It's probably preferrable to use the jquery-rails gem, as it won't ever change in location, whereas the google url might get removed at some point. Here's a question though: if the on_the_spot gem depends on having the jquery-rails file installed, why isn't it a dependency for the gem? When I did gem install on_the_spot, it installed on_the_spot and it also installed json_pure (since it was a dependency). Wouldn't it make sense to have jquery-rails as a dependency as well? Either that, or I would recommend putting something in the RDoc documentation and/or the documentation located at http://rubydoc.info/gems/on_the_spot/0.0.4/file/README.markdown
Sorry these were the lines I put at the top of my .erb files to get it to work: <= javascript_include_tag 'https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' %> <= javascript_include_tag :on_the_spot %>
Hi Ben, well you will still need to download and refer to the <code>rails.js</code>, and the gem i mention does that for you. Also, if you would choose to, it can also install jquery-ui for you. Anyways: i just updated the documentation. It seemed pretty obvious for me, but you were right in suggesting it. As the jquery-rails gem only helps with installing, and you might as well install jquery on your own, i cannot make the gem a dependency. I will try to look up how i can make the dependency on jquery more explicit/clearer otherwise.
Cheers Nathan. Not trying to bust your chops, just trying to be helpful to you and future users : ).
Ok here's a new problem for you. Just upgraded my app's bundle to use the newest version of Rails (3.0.3). Had on_the_spot working perfectly with 3.0.0, but now with 3.0.3 I'm getting this error message: undefined local variable or method `can_edit_on_the_spot' for UsersController:Class Is on_the_spot incompatible with Rails > 3.0.0?
Hi Ben, it definitely is compatible with rails 3.0.3. I just tested with my test-project (on-the-spot-tester) and it works like a charm.
@Nathan, Do I need to change the terminology being used on my controller? I have the line 'can_edit_on_the_spot' on my user controller, and it is throwing me that error... any clue what I need to change to make it work again?
@Nathan Nevermind, it was a problem of my own because I was trying to switch over to installing the jquery-rails gem but didn't do the install for the plugin. On a seperate note, I noticed that the documentation at "http://rubydoc.info/gems/on_the_spot/0.0.5/frames" still says to do a get route for the :update_attribute_on_the_spot and should be corrected to say post :update_attribute_on_the_spot instead. Thanks a bunch.
I'm trying to use the on_the_spot but always get the "undefined local variable or method `can_edit_on_the_spot’ for UsersController:Class" I have try almost all, any tips? also using i get a error, I had try then this error was done but doesn't work because the undefined local variable or method error! I have follow your steps in 4 different project, always with the same result.... Thanks for any help
Hi Malandro, it only works in rails-3 projects, you need to have jquery inside your project. Once you have the gem added to your gem-file, and have run <tt>bundle install</tt>, the command <tt>can_edit_on_the_spot</tt> should be known in any controller. You did run bundle install? You were able to run the generator?
@Nathan Thanks so far, Yes, using Rails 3.0.3 and Ruby 1.9.2 I add to the Gemfile gem "jquery-rails" and gem "on_the_spot" then run "rails g jquery:install" and "rails g on_the_spot:install" this successfully generate a lot of files ('jquery.min.js' and 'rails.js', maybe some more I don't remember now) and I add these with the javascript_include_tag. I surly try bundle install but don't know if before the rails g jquery:install or after run the install command, but probably after, as I see it is not working! with "You were able to run the generator?" is the gem 'rails3-generators' mean? if yes, then no, I just find it now looking for a generator :) I can test it tonight!
Nice gem. However, I encountered an issue related to the jEditable javascript not being in my javascript includes. As a result, I got a message in the javascript console that line 48 in the on_the_spot.js results in an error because the element has no 'editable' method. Not sure if this javascript file is supposed to be picked up automatically or not, but I had to add the jEditable javascript file (jquery.jeditable.mini) to the javascript includes to get this to work properly.
The routes file is incorrect. Here is what it should be: resources :posts do collection do put :update_attribute_on_the_spot end end Found this on the github page here: https://github.com/nathanvda/on_the_spot
Excellent plugin! Thought I'd pass along how to grab the edit form for css styling: For the input field itself... span.on_the_spot_editing form input { font-size: 10px; } For the 'ok' and 'cancel' buttons... span.on_the_spot_editing form button { font-size: 9px; } My page layout required a smaller font size and button size. This css will allow you to style the edit_in_place form content and buttons however you like. Thanks again!
Error:undefined local variable or method `can_edit_on_the_spot' What I have done 1)installed jquery-rails run it using rails g jquery:install 2)installed on_the_spot run it using rails g on_the_spot:install 3)routes: resources :#XXXXXX do collection do put :update_attribute_on_the_spot end end 4)application.html.erb>>>>>>> But still getting error
i am following your logic but i get the following error <pre>No route matches {:action=>"update_attribute_on_the_spot", :controller=>"users"}</pre> Extracted source (around line #24): <pre> 21: .status 22: .current_status 23: -#%p=h @user.status 24: %p= on_the_spot_edit @user, :status 25: %p.update_status 26: = link_to "update status", "#update_status", :id => "update_status_link" 27: %p.last_updated </pre>
Hi urjit, the latest documentation of the gem can be found on github. I updated the info here now too. In your routes you should write <code>put :update_attribute_on_the_spot</code> instead of <code>post :update_attribute_on_the_spot</code>. Hope this helps.
Just an hint for not-english users. If your locale is different from :en be sure to create your localized version, otherwise the html snippet inserted by the gem will be messed up. Hope this hint will save 10 minutes to anyone.
Add comment