In-place editing with contentEditable property and jQuery
Firefox 3 was released on June 17, 2008, and from that time, Firefox 2 browser share is quickly dropping. Very soon it will become inefficient to continue supporting it. And we will be able to use a lot of new Firefox 3 features, such as canvas support, CSS and DOM improvements and other. I am really glad that Firefox3 supports the “contentEditable” property. Setting this attribute to “true” allows you to make parts of a document editable. This attribute was already supported by IE6/7/8, Safari, Chrome and Opera. So now we can start using it in our applications.
To test “contentEditable” I made a plugin that allows you to convert parts of the page into editable areas, just click on them and when you finish editing click outside. If you convert an inline element (h1…h5, p ) with this script, the line breaks will be disabled.
Usage
First, add jQuery, plugin and style sheet to your page.
<link href="editableText.css" rel="stylesheet" type="text/css" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script> <script src="../jquery.editableText.js" type="text/javascript"></script>
Next, pass the elements you want to make editable to the plugin. In this example I marked editable elements with “editableText” class.
jQuery(function($){
$('.editableText').editableText({
// default value
newlinesEnabled: false
});
// we will add more code here
});
Now you should create a function that will do something with the new
value of the editable element. Bind it to the element using change
// bind an event listener that will be called when
// user saves changed content
$('.editableText').change(function(){
var newValue = $(this).html();
// do something
// For example, you could place an AJAX call here:
$.ajax({
type: "POST",
url: "some.php",
data: "newfieldvalue=" + newValue,
success: function(msg){
alert( "Data Saved: " + msg );
}
});
});
event.
Download: http://www.ziddu.com/download/722162…87275.zip.html
Script Demo: http://valums.com/wp-content/uploads…/demo/demo.htm
