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 .
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
- 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> - 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' }); - That’s it you are done.
Processing On Server
- you get the post data as
- id, the id of the div you were editing and,
id editme
- id, the id of the div you were editing and,
- <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
Related posts
- akWpLightBox : simple lightbox for wordpress
- akeditable: Jquery inplace editor
- akModal: simplest alternative to thickbox
- akslideshow
- TubeSpy by Ajaxonomy
Filed under jquery | Comments (35)
35 Responses to “akeditable: Jquery inplace editor”
[...] akeditable: Jquery inplace editor | am i works? Voici un petit plugin jQuery qui vous permet de faire de l'édition live [...]
in opera 9.52 the button of cancel does not work
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
@gaurav you can find my details at phpcamp.org, or phpcamp google group.
cheers
Its a good work. How can i use combo box instead of text area??
how can i use combo box instead of text area??
@vineeth for that you will need to modify the source code to use select tag instead of input tag
Hi Amit,
I am not familiar with JavaScript. Can you tell me how can i write those codes.
Thanks for your support.
@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.
Ok Amit. i will try.
The cancel button is not working in Chrome or the latest version of FireFox
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);
}
@houser thanks, I am sure it will help others.. I will update the code and release it sometime soon.
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
@Jimmy nice idea, thanks. for now you have to modify the source to add oncomplete.
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.
i think something is wrong here id=’,’akusercomment’ check if quotes are proper.
sorry for wrong question!!
i put on click event as:
’ajax.php?mode=eg1&id=’,’akusercomment’
but when i echo id on ajax.php it shows “akusercomment”
Please reply to my question
[...] you can check for details at http://amiworks.co.in/talk/akeditable-jquery-inplace-editor/ [...]
Can this be run through asp.net? If so anyway you could show an example?
I have problems with the TAG in the text, is there a way to solve the problem
i solved my problem
find i.value=old_content; and add this line obove it.
var old_content = old_content.replace(//gi, “\n”);
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?
@utsav find “f = document.createElement(‘form’);” you can add after this.
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).
Thanks for this plugin, just what i was looking for.
It don’t save modified text… How to make it work only for administrator, not everybody?
@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.
Poor, it’s too complicated for me
Maybe there are some existing examples?
[...] as jEditable, ie you click on the text to edit or a link and it converts the area into a from Web Site Demo Download AKPC_IDS += "568,";Popularity: 1% [?] Share and [...]
nice plugin
amit ji its not working in ie its working fine in mozilla how to resolve can u help?
thank u
opera not work
[...] Inplace Edit 보기 [...]