Introduction

You have probably seen a new HTML5 feature called contenteditable. It enables you to edit any element
in HTML using the inline editor. The only thing you will need to do is attach some event handlers that will be called when editing is finished and send
the new content to the server-side. If you like this HTML5 feature, you will love this plug-in.

Although the contenteditable feature is nice to have, if you have tried to use it in your web applications,
you have probably noticed that you need to implement a lot of other functionalities such as sending AJAX requests to
the server side, handling errors, validation, etc.
Also, it works great if you edit plain text, however if you want to use some other editor such as calendar, check box, or select list where you don't want to enable
the user to enter anything, you will see that regular contenteditable is not sufficient enough.

In this article, I will show you a jQuery alternative for content editable -
the Jeditable plug-in.
Also, here I will explain how you can implement inline editing functionality in
an ASP.NET MVC3 application using jQuery. The
Jeditable plug-in enables you to create
an click and edit field as shown in the following figure:

On the left side is shown a simple HTML page, and on the right side is shown this page when you click on the text. The
text will be replaced with a text area,
and two buttons for save and cancel will be generated. When you finish with editing and click
the OK button, text in the text area will be posted to the server
page and new text will be placed instead of the old one. You can see this in the live examples
on the Jeditable demo site.

The Jeditable plug-in can be easily customized (e.g., to use text input or select
a list instead of a text area,
change style/behavior, etc.) as explained in the rest of the article. On the demo page with
custom examples see various examples with different editor types. Also, it will handle for you communication with the server side page.

Background

The Jeditable plugin is a very useful plugin that enables inline editing of HTML. With the Jeditable plugin, you can enable users of your application
to simply click on the element they want to change and modify it immediately without a separate edit form.

The idea behind the Jeditable plugin is to replace static elements with the appropriate form element where
the user can edit content and submit it to the server-side.
As an example, let us assume that you have placed some static HTML element in the page - something like
the following HTML code:

<spanid="txtUser">John Doe</span>

This is a plain text field. You can enable the user to click on this field and edit it using the following JavaScript call:

$("#txtUser").editable("/ServerSide/Update");

Each time the user clicks on the element with the ID txtUser,
the Jeditable plugin will convert this element to a text box, put the content of the element in
the text box value, and post a new value to the /ServerSide/Update URL via
an AJAX call when the user presses Enter. If the value is successfully saved
on the server-side page, the Jeditable plugin will replace the old value of the element with the new one.

The Jeditable plugin will handle all interactions on the user interface, and
the only thing you will need to do is configure the plugin and implement server-side logic that handles
the changed values.

Using the code

In this article I will explain how to use the Jeditable plugin in an ASP.NET MVC3 application. In the following sections are described details about the model,
view, and controller that will be used in the example.

Model

In this example is used a simple model representing a company. The source code for the model class is shown in the following listing:

In order to show company details, you will need to enter the URL /Company/Details. There are two other methods in the controller that accept AJAX calls from
the Jeditable plug-in (this will be described below).

Once you run this code, you will get the standard details page as shown on the following figure:

You might notice that this is a standard, unstyled MVC details page generated by Visual Studio. It contains
a fieldset with the label "Company",
where I have placed three company fields (company, name, address, and town) with labels. In the next section I will show you how you can convert
this static view into fully editable elements.

Applying
the Jeditable plugin

In this section, I will show you how you can implement fully inline editable functionality in the details page.

Configure editable labels

In the first example, we will make the labels editable so the user can change them directly on the page. In the page, each input field has its own label such as:

<divclass="display-label"id="lblName">Name</div>

In the page I have placed a display-label class in each div that represents a label. I will use this class to make the label editable. jQuery code that applies
the Jeditable plugin on the labels is shown in the following listing:

$(".display-label").editable("/Company/UpdateLabel");

Each time you click on the label, it will be converted to text input where
the user can enter a new value for the label. This is shown on the following figure:

As you can see, clicking on the label "Name", it is converted into text input.

When the user presses the Enter key, a value of the new label will be sent to the /Company/UpdateLabel server side page. In the request will be sent two values:

id - ID of the label. This value can be used on the server side to determine what label should be updated.

value - text that is entered in the input field.

An example of such a kind of request is shown on the following figure:

On the server side should be added a controller with the action method that will be called when the /Company/UpdateLabel request is sent.
An example of the controller and action method is shown in the following listing:

This action method accepts the ID of the label and a new value. Specific code for updating
the label value in the database or configuration files is omitted because
it is application specific and not directly related to the plug-in.

Configure editable fields

We can also make the field values editable. Let us assume that we have placed
the ID of the current company in the hidden field with the ID CompanyId,
and that each field value is placed in the div with class display-field. Part of the HTML is shown in the following code:

Each time you click on the element with the class editable, it will be converted to text input as shown on the following figure:

When the user presses Enter, a new value of the element will be sent to the server side page /Company/UpdateField. In the request will be sent four values:

id - ID of the field. This value can be used on the server side to determine what property of the company should be updated.

value - Text that is entered in the input field.

CompanyId - This is an additional parameter that will be added to the request.
The value of this parameter is a value of the hidden field with an ID "CompanyId".

RecordType - This is an additional parameter that tells the server that we are editing company.

As you can see, the code is very similar to the previous code, with a difference in the two additional parameters CompanyId and RecordType.
As we are editing particular companies and not global labels, we should have on the server side
the ID of the company where we are changing the field value.
I have placed the ID of the company in the hidden field with ID 'CompanyId' and
the Jeditable plug-in takes this value and adds it to the request parameters when requests
are submitted.

Also, sometimes we would need to know on the server side if we are editing companies, jobs, people, products, etc.
Therefore, it would be nice to have some additional
parameters that send information about what the type of the record is that we are editing. In this example, this is achieved using the second custom submitdata parameter
called RecordType. The server-side page will check the value of this parameter and update either company, job, product, etc.
In this simplest example, we have only companies so this parameter is not used. As an alternative, you can use different URLs for different record
types (e.g., '/Company/UpdateField', 'Product/UpdateField', 'Job/UpdateField', etc.)
if you do not want to have an additional parameter.
A trace of the AJAX call that is sent to the server-side is shown on the following figure:

On the server side should be added a controller with the action method that will be called when the
/Company/UpdateField request is sent.
An example of the controller and action method is shown in the following listing:

This action method accepts the ID of the field, the new value, the ID of the company, and
the type of the record we are editing. Specific
code for updating the company field value in the database is omitted because it is application specific and not directly related to the plugin.

Configuration of
the Jeditable plugin

The default functionality can be easily changed by setting different options in the plugin initialization call. Options are set as a second parameter in the Jeditable call.
In this section will be shown different options that can be applied.

Customize submit options

By default, clicking on the element will initiate the Jeditable plugin and pressing
the Enter key will be considered as accepting changes. Losing focus from the element (blur)
or pressing the ESC key will be considered as cancel action. You can change these options and add separate buttons for
the accepting and canceling actions,
which will be injected beside the text input. In order to configure the submit and cancel buttons, you will need to set these parameters in the initialization:

If cancel and submit parameters are not set, the buttons will not be generated.

Changing the editor type

The text box is a default editor, however you can use a text area of a select list as an alternative editor. In order to use
a text area instead of text input,
you should just change the value of the parameter type as shown in the following example:

Note that when you use the text area input, you should add a Submit button because in the textarea, an Enter key adds a new line so it cannot be used for submitting a value.
Look of the editor configured as a text area is shown on the following figure:

Another editor type is a select list where you can define a set of options that might be selected.
An example is shown in the following listing:

In this example, the select list containing three values is generated. Note that the last parameter tells the Jeditable plugin which value should be selected.
Instead of the hardcoded values in the data parameter, you can load options from the server-side URL:

When the user clicks on the element, a /Company/Options?type=1 request will be sent to to server-side using the GET protocol.
The returned values will be used as options in the select list.
A select list editor is shown on the following figure:

Text box, text area, and select list are standard editors, but there are other custom types such as checkbox, datepicker, file upload, time editor, etc.
Some of them are shown on the Jeditable demo page.

If you cannot find an editor type you need, you can create your own editor - see this
tutorial for more details.

Configure submitted data

By default, the Jeditable plug-in sends the ID of the element and value that is entered in the input element to the server-side URL.
However, you can customize these settings as shown in the following example:

id: Name of the submitted parameter which contains the content ID. Default is
id.

name: Name of the submitted parameter which contains edited content. Default is
value.

method: Method to use when submitting edited content. Default is POST. You most likely want to use POST or PUT.

submitdata: Extra parameters when submitting content. Can be either a hash or function returning a hash. You saw how this
function is used in the example above in order to add a company ID parameter from the hidden field.

When Jeditable submits a request to the server-side, the POST request will look like: /Company/UpdateField?COMPANY_FIELD=Name&FIELD_VALUE=TEST&type=company.

As you can see, the id and value parameters have different names, value is encoded, and a new parameter called type is added to the request.

Configure display/behavior

The way the editable plugin is activated can be set in the configuration. This is configured using the
event and onblur parameters:

The parameter event is a jQuery event that will convert the content to editable input (e.g., 'click' , 'dblclick, or 'mouseover').
The onblur parameter can have one of these values: 'cancel', 'submit', 'ignore', or can be set to
a function. This parameter will define what the plugin does when input loses focus.

You can change the way Jeditable is displayed. You can set the style or associate
a CSS class with the form where the inline editor is placed.
If you put the value 'inherit', a class or style from the surrounding element will be placed in the form. Also, you can define
the width and height of the editor.
An example is shown in the following listing:

In this example, if the element does not have any content 'N/A' will be displayed (default value is 'Click to edit'), tooltip will be 'Click to edit'.
While the plugin waits the answer from the server, text 'Saving...' will be displayed. You can put HTML instead of the plain text if you want.
Once user edit the text, it will be automatically highlighted because select property is set to true.

Data parameter represents the data that will be shown in the editor. In the previous example with the select editor type, in the data element
was placed list of options that will be placed in the select list. If you put a function as a data parameter, it will be called before Jeditable takes the current
text from the element, this text will be passed to the function, and the returned value will
be set as the content of the editor element. It can be either a string or function
returning a string. This can be useful when you need to alter the text before editing (e.g., encode it as shown in the example).

Event handling

Many events can be handled in the Jeditable plug-in:

callback - function(value, settings) { ... } is called after
the form has been submitted. value contains the submitted form content.
settings contain all the plug-in settings.
Inside the function, this refers to the original element.

onsubmit - function(settings, original) { ... } called before submit.
settings contain all the plug-in settings. original is the original content of the element. Inside
the function this refers to the original element.

onreset - function(settings, original) { ... } called before reset.settings contain all plug-in settings. original is the original content of the element. Inside
the function, this refers to the original element.

onerror - function(settings, original, xhr) { ... } called on error.
settings contain all plug-in settings. original is the original content of the element. Inside
the function, this refers to the original element.

Integration with other plug-ins

The beauty of the Jeditable plugin is the fact that it can be applied on top of any other plugin. As an example you can apply inline cell editing in table cells,
edit nodes in the tree view or in the menu, edit content of tabs, etc. The only thing you need to do is apply
the Jeditable plugin on the elements that should be edited. In the following examples you might find tow usages of editable plugin with tabs and tables.

Integration with JQuery UI tabs

JQuery UI tabs is a part of JQuery UI library and it enables you to easily create tabbed interface. You can find a various cases o usage on the JQuery UI Tabs page. Example of tabbed interface is shown in the following figure:

Each tab in the picture is a link in the format <a href="#tab-1">Nunc tincidunt</a>, <a href="#tab-2">Proin dolor</a>, <a href="#tab-3">Aenean lacinia</a>, where tab-1, tab-2, and tab-3 are ids of tab contents. You can apply editable plugin on the tab links using the following code:

Editable plugin is applied on the link that point to the first tab (via href attribute). When user double-click on the tab link and edit tab label, JEditable plugin will post new value to the page /Settings/UpdateTabLabel with the changed value and id "tab-1". On the following figure is shown how you can edit the first tab:

Similar script can be applied to make the other tabs editable.

Integration with DataTables

JQuery DataTabes plugin adds pagination, filtering and sorting in the table. Once you apply DataTables plugin you can apply editable plugin on the cells. In the following figure, you can see how the Jeditable plugin can be applied on the table cells:

In this example is applied the jQuery DataTables plug-in on the table, and then JEditable
is applied to particular cells. Script that applies editable plugin on the table cells is simple:

$("table#mycompanies td").editable("/Company/UpdateTableCell");

As long as each cell has its own id JEditable plugin will work. Better solution would be to avoid ids in each cell and send just id of the row and column with value. In that case you might take alook at the already prepared solution for applyng editable plugin on the DataTable on the DataTables site or DataTable Editable plugin that combines features of DataTables and JEditable plugins. You can see more details about creating an inline editable cell in
the
ASP.NET MVC Editable
Table[^] article.

Conclusion

In this article are shown basic concepts of implementation of an inline editor in MVC3. I have also shown various configuration options.
If you have any questions about the
Jeditable plug-in or you need more info about the way it is used,
please take a look at the Jeditable site where you will find
a complete documentation with live examples.

Attached is source code with the Web Developer 2010 project where is implemented a simple page containing editors.

Share

About the Author

Started as a young scientist - winning the highest national awards in mathematics, physics, electrotechnics, and electronics.
Graduated from Faculty of Electrical Engineering, Department of Computer Techniques and Informatics, University of Belgrade, Serbia, as a first in the class, as a Master of Software Sciences.
Currently working in Gowi as a Software engineer, architect, and project manager since 2004 - mostly using Microsoft technologies (ASP.NET, C#). Member of JQuery community - created few popular plugins (four popular JQuery DataTables add-ins and loadJSON template engine).
Interests: Software engineering process(estimation and standardization), mobile and business intelligence platforms.