Jeditable – Edit In Place Plugin For jQuery

How does in place editing work?

Normal flow is this. User clicks text on web page. Block of text becomes a form. User edits contents and presses submit button. New text is sent to webserver and saved. Form becomes normal text again.

Basic usage

While reading you might also want to check live demo. For basic examples we assume to have following html elements.

<div class="edit" id="div_1">Dolor</div>
<div class="edit_area" id="div_2">

Lorem ipsum dolor sit amet, consectetuer 
adipiscing elit, sed diam nonummy nibh euismod 

tincidunt ut laoreet dolore 
magna aliquam erat volutpat.

</div>

There is only one mandatory parameter. URL where browser posts edited content.

 $(document).ready(function() {
     $('.edit').editable('http://www.example.com/save.php');
 });

Code above does several things: Elements with class edit become editable. Editing starts with single mouse click. Form input element is text. Width and height of input element matches the original element. If users clicks outside form changes are discarded. Same thing happens if users hits ESC. When user hits ENTER browser submits text to save.php at www.example.com.
Not bad for oneliner, huh? Lets add some options.
Elements with class edit_area will use textarea as input. They will also have spinning image when data is being submitted to server. Elements with class edit will have text Saving… instead of spinning image. As a bonus lets add tooltip to both. Tooltips are great for informing users what they should do.

 $(document).ready(function() {
     $('.edit').editable('http://www.example.com/save.php', {
         indicator : 'Saving...',
         tooltip   : 'Click to edit...'
     });
     $('.edit_area').editable('http://www.example.com/save.php', { 
         type      : 'textarea',
         cancel    : 'Cancel',
         submit    : 'OK',
         indicator : '<img src="img/indicator.gif">',
         tooltip   : 'Click to edit...'
     });
 });

These two examples cover most of needs you usually have. Since most of people like to tweak and hack, lets go forward…