akeditable: Jquery inplace editor

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

akeditable: Jquery inplace editor

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.

It works in exactly same fashion as jEditable, ie you click on the text to edit or a link and it converts the area into a from. Check out the live demo.

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. <name that you specified in the setting> , 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

    35 thoughts on “akeditable: Jquery inplace editor

    1. Pingback: Brève 14: jQuery, wallpaper, CSS, listes …

    2. Hi Amit,

      It was nice to meet you at PHP Camp. I want to seek your help for a PHP based web application that I am currently developing. Can you mail me your phone no./ email address on which I can touch base with you.

      Thanks
      Gaurav

    3. @vineeth for that you will need to modify the source code to use select tag instead of input tag

    4. Hi Amit,

      I am not familiar with JavaScript. Can you tell me how can i write those codes.
      Thanks for your support.

    5. @Vineeth sorry man, but if you don’t know JS i can’t help much. It would be better if you ask your colleagues or friends in this one.

    6. Okay, I found the error on the cancel button. In brief, the cancel button click event is spilling over (bubbling) up to the containing DIV element. To prevent this, the following code needs to be modified:

      b.onclick =function(e){
      reset(old_content,objtoedit);
      }

      To this:

      b.onclick =function(e){
      if(window.event)
      e = window.event;

      try {
      e.stopPropagation();
      }
      catch(err){
      try {
      e.cancelBubble = true;
      }
      catch(err2){}
      }

      reset(old_content,objtoedit);
      }

    7. @houser thanks, I am sure it will help others.. I will update the code and release it sometime soon.

    8. is there any way to add an “oncomplete” response? eg. when the server side portion is completed, a message saying “Commented Updated” could appear above the textarea that was edited

    9. hey I needed some help updating data on database with akeditable. I send the value as
      ———————-
      <a style=”margin-left:3px;color:red;float:left;” href=”javascript:void(null);” onclick=”akedit(‘ajax.php?mode=eg1&id=’,’akusercomment’,{
      type : ‘text’,
      name : ‘usercomment’,
      width: ‘232px’,
      height: ’80px’,
      submit:’save’
      });”>Edit
      ———————————————-
      and get the value in ajax.php as
      —————————————–
      if($sql=mysql_query(“update advertisement set link = ‘$data’ where id=’$_REQUEST[id]'”) or die(“Could Not Find the Table named advertisement”))
      —————————————–
      it doesnot update the db and $_REQUEST[id] returns “akusercomment”. wht do i do? I need urgent help.

    10. Pingback: jquery plugins by name « Web Developer

    11. i solved my problem

      find i.value=old_content; and add this line obove it.

      var old_content = old_content.replace(//gi, “n”);

    12. Hey it works good for me now. but i have one more problem using it. As of now, i need it to work with the input type “file”. i.e. i want to update file using this and i think it is caused since to upload we need to set the form enctype to “multipart/formdata”. but where do i do it?

    13. Thank you for the plug-in, this is exactly what i was looking for! Small & simple & effective.
      However your parameters don’t match the actual settings in the script. What i mean is, in every example (even those included in the .zip) the params ‘width’ and ‘height’ do not affect the size of the textearea, instead you have to use ‘rows’ and ‘cols’. You should change your documentation and/or the script.
      Thanks anyway!

      And an idea BTW, it would be nice if one could assign a CSS-class to the Save/Cancel buttons (or style them somehow).

      • @marcin yes, this is JS.. it can’t save.. you need to write the code in PHP or other backend language to save the modified text.

    14. Pingback: akeditable: Jquery inplace editor Plugin | jQuery Wisdom

    15. amit ji its not working in ie its working fine in mozilla how to resolve can u help?
      thank u

    16. Pingback: Turning Point » Blog Archive » Web Available UI, Nonflash – 웹에서 응용 가능한 UI

    Comments are closed.