Xooxia Development

One of the concepts that I find very intriguing today is that of inline editing. Inline editing refers to being able to view a website normally and change the content directly on that page. This concept has been used via data grids for a while now, but is starting to become a more common way to update regular xhtml content on a web page.

The most common way to have a layman update content on a site is through an administration page. That is, the user will log in to the admin section of a site, choose the page to edit from a list of available pages, and then update the content through an online form and submit those changes. The changes are entered into the database and the next time the page is loaded, the server-side code pulls the new content to include into the page.

There are two obvious drawbacks to this set-up.

1. The user has to know how to access the administration section of the website.
   Trivial, you say? I’d agree, but aren’t we in the business of creating applications that are intuitive and easy for the user? The user could bookmark the admin URL, but what if they need to access the page from a different system? We could offer a ‘Click here to administer this page’ link on the pages, but that’s not great design.
2. The user’s flow through the process would be unnecessarily complicated. First, they would access the page to be updated to view it as it currently is. Second, they would then go to the admin section and carry out their updates. Third, they would then go back to the front-side of the page to be sure the updates took hold. Wouldn’t it just be easier if the user could go directly to the page and make the updates there?

Yes, it would be. And that’s exactly where inline editing comes in. Through DOM manipulation, we can code a server side script that would determine what content within a web page would be editable, and then write a new editable element onto the page allowing the user to update the content directly onto the page. Then, by submitting the updates to the server through an asynchronous call, we can keep the user on one page and carry out the same updating process as before.

A script that I came across that I use on a discussion forum in our College’s extranet is called Edit Regions, developed by Greg Taff and is available at Edit In Place. I chose this script for two main reasons: one, it was easy to implement (just call two scripts in the document head, then add a specific class attribute to the regions that should be editable) and two, it was compatible with most modern browsers. I did have to add some code to make the script compatible with Safari, and I had to write some code to submit the changes back to the server. However, with most free scripts available, this wasn’t a surprise and was very easy to implement.

Here is the basic premise of the script: In the screenshot below, you’ll notice a region that is highlighted in yellow with a red dashed border. This region has a class attribute of ‘editable’. The script uses DOM manipulation to add a click event handler to all div elements with the ‘editable’ class attribute. The click handler triggers a new div with a textarea to be drawn to the screen. The content of the editable div is then inserted into the textarea and can be manipulated by the user. Clicking on the ‘Save’ button then triggers the Ajax call to the server and saves the changes. The changes are then inserted back into the editable div and the textarea is hidden.

I feel this is extremely useful and intuitive for the user. However, I do have a few plans of improvement to really put this script to use.

1. I’d prefer to replace the editable div with the textarea instead of draw it on screen over the editable div. This would create a more of a ‘word-processor like feel’ for the user rather than a whole now div element added the screen.
2. I’d prefer to allow rich text editing capabilities to the textarea. Most of my users that would be using this feature would not be familiar with xhtml code, therefore would be limited to adding only regular text to the div. This would be a much more useful component if the user could add images, text formatting and what-not through a WYSIWYG interface.
3. Provide graceful degradation by allowing a user with limited browser capabilities to submit changes through a regular web-form.

This is a great concept and one that is sure to be developed further. If you have any relevant scripts or ideas, please leave them below.

Bookmark:

(No Ratings Yet)