Those of you in hurry to download the plugin or source can download it from plugins page of akeditable at jquery .

This is the plugin based on jEditable plugin created by Tuupola and Dylan Verheul. The purpose of create this plugin was to specifically solve the problem that i was facing, ie to give my users option button to save and or cancel, instead of using enter to save the content.

I will not say that akeditable is any improvement over jEditable, which is far better then what i have done. akeditable was meant to be used with situations similar to the way i have used it in celsias project or people section.

How To Use It

1. It is very simple, just call the akedit on click function of the element you want to convert in to editable area with the ID of the element.

  <div id="editme" onclick="akedit('ajax.php?mode=eg1','editme',{
      type : 'textarea',
      name : 'usercomment',
      width: '232px',
      height: '80px',
      submit:'save'
      });"> THIS IS EDITABLE ON CLICK
      </div>

2. Parameter to akedit function is the url: where you want to post the form data, the id of the element you want to convert into editable area and settings as hash like the value for submit button and other stuff.

   akedit('ajax.php?mode=eg1','editme',{
           type : 'textarea',
           name : 'usercomment',
           width: '232px',
           height: '80px',
           submit:'save'
      });

3. That’s it you are done.

Processing On Server

1. you get the post data as
1. id, the id of the div you were editing and,

   id	editme

2. , which contains the value that user typed in the textarea or textbox.

usercomment THIS IS EDITABLE ON CLICK i added this

Update(25 August 2009):Released the new version 1.1 of the plugin, and also made it compatible with jQuery 1.3.x

Demo: http://amiworks.co.in/akeditabledemo/
Download: http://plugins.jquery.com/files/akeditable.1.1.0.zip
Source: http://amiworks.co.in/talk/akeditable-jquery-inplace-editor/

Related Listings:

1. akeditable in place editor This is the plugin based on jEditable plugin created by...
2. sLedit – Inplace editor for mootools I’ve had a lot of requests to send people mooEdit....
3. Table Editor with jQuery TableEditor provides flexible in place editing of HTML tables. User...
4. NicEdit Inline Content Editor NicEdit is a WYSIWYG editor for websites. Its goal is...
5. Ajax Inline Quick Edit in Place Ajax Inline Edit in Place Script is a fast forward...

Do you like this post?

Email: