Jeditable - Edit In Place Plugin For jQuery

Today, i came across a Jquery Plugin Jeditable which allow you to click and edit the content of different html elements

This is How it works

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. For Live Demo, Please click here.


Demonstration

1) First, you need to download Jeditable plugin file from here.

2) include the above downloaded file under head section in your HTML Page, You also need to include jquery library JS File.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="http://www.appelsiini.net/projects/jeditable/jquery.jeditable.js" type="text/javascript" charset="utf-8"></script>

3) HTML Content

  <div class="edit" id="bloglink">Suresh.Ariya</div>
  <div class="edit_area" id="blogdesc">About PHP, Zend Framework 1 and 2, Mobile Web App and Native App Development using Sencha Touch, PhoneGap</div>

4) jeditable jquery code

  $(document).ready(function() {
     $('.edit').editable('http://www.yourdomain.com/save.php', {
         indicator : 'Saving...',
         tooltip   : 'Click to edit...',
         type  : 'Text',
         cancel    : 'Cancel',
         submit    : 'Save',
     });

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

 Elements with class name 'edit' will use text as input. Form input element Text will be displayed when user click on the text inside 'edit' class. When user hits Save, form data will be submitted to save.php at www.yourdomain.com.

 Elements with class 'edit_area' will use textarea as input.  Form input element TextArea  will be displayed when user click on the text inside 'edit_area' class. They will also have spinning image when form data is being submitted to save.php at www.yourdomain.com.

 Following are the parameters that most widely used.

 method: Method to use when submitting edited content.

 callback: Function is called after form has been submitted. Callback function receives two parameters. Value contains submitted form content. Settings contain all plugin settings.

 submitdata: Extra parameters when submitting content.

 type: Input type to use. Default input types are text, textarea or select.

 data: Form data passed as parameter. Can be either a string or function returning a string. Can be useful when you need to alter the text before editing.

 tooltip: Tooltips are great for informing users what they should do.

 indicator: display Text/spinning image when data is being submitted to server.

 For the list of all supported parameter reference, Click here.

Hope, you enjoyed this Post.