Let's start with some markup, which will represent an NorthWind employee details (you can download NorthWind database from here):
TitleOfCourtesy: <u><%: Model.TitleOfCourtesy %></u><br />I would like to keep this sample a simple as possible, so there will be no fancy design or architecture:
FirstName: <u><%: Model.FirstName %></u><br />
LastName: <u><%: Model.LastName %></u><br />
Title: <b class="edit" id="Title"><%: Model.Title %></b><br />
Address: <b class="edit" id="Address"><%: Model.Address %></b><br />
PostalCode: <b class="edit" id="PostalCode"><%: Model.PostalCode %></b><br />
City: <b class="edit" id="City"><%: Model.City %></b><br />
Country: <b class="edit-select" id="Country"><%: Model.Country %></b><br />
Notes: <i class="edit-area" id="Notes"><%: Model.Notes %></i><br />
<br /><br /><button id="Submit">Submit</button>
- fields which will be edited in standard text input are wrapped in <b> element with class 'edit'
- fields which will be edited in select are wrapped in <b> element with class 'edit-select'
- fields which will be edited in textarea are wrapped in <i> element with class 'edit-area'
<script src="<%= Url.Content("~/Scripts/jquery-1.4.1.min.js") %>" type="text/javascript"></script>
<script src="<%= Url.Content("~/Scripts/jquery.jeditable.mini.js") %>" type="text/javascript"></script>Now we can write some JavaScript:$(document).ready(function () {
//Standard 'text' inputs
$('.edit').editable($.updateEmployee, {
//Element tooltip
tooltip: 'Click to edit...',
//Input style
style: 'display: inline'
});
//Selects
$('.edit-select').editable($.updateEmployee, {
//Options for select (you can use loadurl if you want to request data from server)
data: "{'USA':'USA','UK':'UK'}",
//Type
type: 'select',
//Text for accept button
submit: 'Accept',
//Element tooltip
tooltip: 'Click to edit...',
//Select style
style: 'display: inline'
});
//TextAreas
$('.edit-area').editable($.updateEmployee, {
//Type
type: 'textarea',
//Text for cancel button
cancel: 'Cancel',
//Text for accept button
submit: 'Accept',
//Element tooltip
tooltip: 'Click to edit...',
//TextArea style
style: 'display: inline'
});
});The first parameter of editable is usually an URL where browser posts edited content. In that situation, every field is being posted as soon as user finishes editing. There is also a possibility of passing function in first parameter. As you can see, I'm using second approach here. The $.updateEmployee function looks like this:$.updateEmployee = function (value, settings) {
//Based on the current element, we update the corresponding property of employee
switch ($(this).attr('id')) {
case 'Title':
window.Employee.Title = value;
break;
case 'Address':
window.Employee.Address = value;
break;
case 'PostalCode':
window.Employee.PostalCode = value;
break;
case 'City':
window.Employee.City = value;
break;
case 'Country':
window.Employee.Country = value;
break;
case 'Notes':
window.Employee.Notes = value;
break;
}
//We have to return string, it will be put into element for displaying
return (value);
}You may wonder where the window.Employee object came from. It's being initialized like this (I know it's ugly, but it's only for sample purposes):(function ($) {
window.Employee = {
EmployeeID: '<%: Model.EmployeeID %>',
Title: '<%: Model.Title %>',
Address: '<%: Model.Address %>',
PostalCode: '<%: Model.PostalCode %>',
City: '<%: Model.City %>',
Country: '<%: Model.Country %>',
Notes: '<%: Model.Notes %>'
};
})(jQuery);This object allows me to perform a single POST for all fields, when user clicks Submit button: $('#Submit').click(function () {
$.ajax({
type: 'POST',
contentType: 'application/json; charset=utf-8',
url: '<%=Url.Action("Details", "Home") %>',
dataType: 'json',
data: $.toJSON(window.Employee)
});
});You can go ahead and click around on our editable elements:
Email
