In Place Editing with RJS

In this post, we shall provide the snippets and explanation of how to use Inplace editor and RJS to update multiple elements in your page.

The Problem

In-Place Editing is a wonderful AJAX based tool that helps users to provide a text field to update and render information that suits the Web2.0 building. Users can use In-Place Editor to either directly connect to a database record for query and updating or can make use of set_XXX_YYY methods to update yourself.

The main issue of In-Place Editor is that it has direct links to update the database record or possibly you can validate information. However there is no way directly if you have multiple elements of the page to be updated according to the information provided in the In-Place Editor.

The Solution

The Solution to update multiple elements after the In-Place editor updates itself can be achieved using RJS (Ruby Java Script). You can first use the In-Place Editor to take inputs from the user and then once you submit information to the database, you can call an RJS to update the In-Place editor and any other elements in the page.

The Case Study

In this case study we shall assume that the user knows what RJS and In-Place editing is all about, but doesn’t know how to link both.

The Case Study is based on an issue which was identified by us few days ago, where we were using In-Place Editor to take inputs about the width and height of an image and store it in the database. However we also had to update our preview image to show this width and height.

The Case study uses a table by name images which holds information such as id, name, width and height and we assume these images are stored with-in public/images/sampleimages folder with the id as image name. (In the example you shall see us referring to this link.)

The Method

Lets start this method from the base and then come towards the UI.

First is the Database:
We create a Table by name images with id, name, width and height information.

Once the database is ready, we start the coding part. As it is known, we directly use the table information, not doing any validation part . So lets keep it simple and do anything at the model end.

Coming to the controller, we have 2 parts to do:

1. Create a method which shall launch the rhtml. Lets do all our work to pass to the viewimage.rhtml.
2. Update the image information when user clicks on Ok in the In-Place Editor.

So our Controller should look as follows:

class CategoryadminController < ApplicationController

def viewimage
@image = Image.find(params[:id])
end

end

All we do here is to get the selected image from the database and put it into the @image variable. Once our method is ready we are set to write the viewimage.rhtml. In the viewimage.rhtml file, we have the following elements:

1. We have an area where we show the name. This can be a simple in_place_editor_field which you can get updated directly with the database (out of our scope).
2. We have an area where user can see the preview image with the width and height of the image.
3. We have an area where we show width and height of the image. This uses in_place_editor and update on these fields should affect the preview image’s width and height

The code for all these three should look as follows:

<div id=“image_info”>

<span id=“name” ><%= @image.name %></span> <br />

<span id=“width” ><%= @image.width %></span><br />
<%= in_place_editor “width”, {:url =>url_for :action=>“set_image_width” , :id=>@image.id) , :script=>true } %> <span id=“height” ><%= @image.height %></span><br />
<%= in_place_editor “height”, {:url =>url_for (:action => “set_image_height” , :id=>@image.id) , :script=>true} %>

</div>

<div id=“image_preview”>
<%= image_tag “/images/sampleimages/#{@image.id}.jpg”, { :width=>@image.width, height => @image.height } %>
</div>

If you see the in place editor you will see that on click of the ok button you have to raise set_image_width method in the controller and also you see :script=>true which means that once the method is called in the controller its next step is to call the RJS.

So now let us update our controller code with these set_XXX_YYY methods. Our controller should now look like:

def set_image_width
image = Image.find(params[:id])
image.width = params[:value]
image.save
@image = image
end

def set_image_height
image = Image.find(params[:id])
image.height = params[:value]
image.save
@image = image
end

In the above code what we see is first get the image object, get the value of the in_place_editor and save the information to the database. Once this work is completed, our last piece is to update the RJS. The setting :script=>true in the viewimage.rhtml and @image = image in the controller should help us to run the RJS file to replace the information.

First of all you have to create an RJS file which is of the same name as the controller method which is being used. In this case it should be set_image_width.rjs and set_image_height.rjs. Once you create these files, all you have to do is query the image object and reload the div so that new information is reflected in your object.
#set_image_width.rjs
page[:width].replace_html( @image.width)
page[:image_preview].replace_html(image_tag( “/images/sampleimages/#{@image.id}.jpg”, {:width=>@image.width, :height=>@image.height}))

What we do in the RJS file is:

1. Replace the In-place Editor span Id with the new modified change — In-place editor by default doesn’t do it.
2. Replace the Preview-image section with the latest width and height information. Sometimes you could just call reload method on the div, but we don’t see it working consistently.

The Summary

Before we end this session, let us summarize the following:

1. We used In-Place Editor to provide text editing.
2. We used set_image_xxx methods to validate and save image objects.
3. We used :script => true to make the in_place_editor to call the RJS file.
4. We created an set_image_xxx.rjs file where we first replaced the width/height span information with latest image width/height and also set the Preview image’s width and height parameter to be as what is available in the corresponding image object.

– Heurion Consulting Information Release