in_place_editor on rails 2.0 and rjs templates
All right. The in_place_editor is gone from rails 2.0 as everyone knows, so now we need to install it as a plugin. No problem. But I needed something particular this time: On this site you can upload pictures and make them password protected. So I had the in_place_editor for the password, and right below it a link pointing to the picture with the password (if you sign up you can see it) like this:
[Picture is password protected:] (in_place_editor) verydifficultpassword
[Link to this picture with password:] click
When a user updates the password, I wanted the link to update as well.
To do it I had to call the in_place_editor with :script => true like this
<span>
Picture is password protected:
<span id="picture_pass_prot">
<%=h @picture.password_protected||'-no-' %>
</span>
</span>
<span id="picture_pass_prot_url">
<% if @picture.password_protected %>
<%= render :partial => 'pic_pass_url' %>
<% end %>
</span>
<%= in_place_editor 'picture_pass_prot',
{:url => url_for (:action => 'update_password_protected',
:id => @picture),
:script => true} %>
the pic_pass_url partial only renders the url for the password protected image.
The update_password_protected action looks something like this
@picture = Picture.find(params[:id])
@picture.password_protected = value
@picture.save
and the update_password_protected.rjs looks like this
page[:picture_pass_prot].replace_html(@picture.password_protected) page[:picture_pass_prot_url].replace_html :partial => 'pic_pass_url'
So we did 2 things now: we replaced 2 elements in the html, and one of them with a partial.
Oh… and to make this work on rails 2.0.x you actually have to patch the in_place_editor def in in_place_macros_helper.rb, adding the line
js_options['clickToEditText'] = %('#{options[:click_to_edit_text]}') if options[:click_to_edit_text]
#ADD THIS LINE HERE
js_options['htmlResponse'] = !options[:script] if options[:script]
function << (', ' + options_for_javascript(js_options)) unless js_options.empty?
because “rails’ “in_place_editor” doesn’t let you specify htmlResponse for the underlying Ajax.InPlaceEditor call, which needs to be set to false.” – see here for the details.
Ok… now finally we have our in_place_editor that updates two (or more) html elements using rjs.