Another In-Place Editor, jQuery Plugin
UPDATE: (12-04-2007) ADDED SOME FEAURES! You can now use the escape key to cancel the action and when you initiate the in-place event, the input field becomes focused.
This is the new home of the ‘Another jQuery In-Place Editor’ that used to reside at http://davehauenstein.com/code/?a=inplace
What is it?
This is a script that turns any element, or an array of elements into an AJAX in place editor using one line of code. It’s written using the jQuery Library, which is available free here.
Examples
Check out this page with examples. It shows a bunch of different ways the script can be implemented and the code examples.
Download
- Version 0.9.9.2 December 4, 2007 (uncompressed - 12K)
- Version 0.9.9.2 December 4, 2007 (compressed - 8K)
Parameter List
- url - POST URL to send edited content
- params - paramters sent via the post request to the server; string; ex: name=dave&last_name=hauenstein
- field_type - can be: text, textarea, select; default: text
- select_options - this is a string seperated by commas for the dropdown options, if field_type is dropdown
- textarea_cols - number of columns textarea will have, if field_type is textarea; default: 25
- textarea_rows - number of rows textarea will have, if field_type is textarea; default: 10
- bg_over - background color of editable elements on HOVER
- bg_out - background color of editable elements on RESTORE from hover
- saving_text - text to be used when server is saving information; default: ‘Saving…’
- saving_image - specify an image location instead of text while server is saving; default: uses saving text
- value_required - if set to true, the element will not be saved unless a value is entered
- element_id - name of parameter holding element_id; default: element_id
- update_value - name of parameter holding update_value; default: update_value
- original_html - name of parameter holding original_html; default: original_html
- save_button - image button tag to use as “Save” button
- cancel_button - image button tag to use as “Cancel” button
- callback - call function instead of submitting to url
The server side of this script is the easiest part. Whatever you print to the browser will be injected into the original element that the in-place editor was attached to. Below is what gets passed to the server via a POST request.
- update_value=content_you_edited
- element_id=id_of_editable_element
- original_html=original_text_before_clicked
Hi dave,
I am planning to use your editinplace plugin..but have few questions..how can I use callback mechanism..I want to update two different div when user user click on save button…can you provide an example of this..
Regards,
Ritesh
Ritesh,
I updated my examples page to show how the callback function works to update 2 divs. Check it out here: http://davehauenstein.com/code/inplace.php and let me know if you have any more questions. Thanks for using!!
Been trying to use images for the save and cancel buttons, but no luck. How is this specific tag supposed to be used? I’m current putting in save_button: “”. The image shows, but it no longer submits properly…
Hi Dave,
I have started using your Jquery In Place editor in my php pages.
.
Its a great tool
I have lot of similar fields which uses the same drop down menu. Is there any way that i can declare an array and pass this array as “select_options”.
Thanks in advance
lin
Hi Dave,
I’m using your plugin on a project of mine and was wondering whether it would be possible to trigger the editing of text from another element, such as a link instead of actually clicking the text itself.
Something like:
$(document).ready(function(){
$(”.trigger”).click(function() {
$(this).parent().children(”.edit_comment”).click();
});
$(”.edit_comment”).editInPlace({ ….
(doesn’t work)
Cheers,
Rob
Hi
Thanks for the nice inplace editor plugin. Only I have one question: is it possible to use a ajax request AND a callback? I want to save things in a database and update some other div. Now you only can use one.
Thanks!
@Dea: if you go to this URL: http://davehauenstein.com/code/scripts/jquery.inplace.source.js and you look at the default settings for the save_button and cancel_button parameters i think it’ll help you see how to pass the images to the jQuery inplace function. If you still don’t understand post another comment and i’ll email you.
@lin: Unfortunately it’s not possible with the way the inplace editor is set… but that is definately something i should look into doing… If you’d like to add that functionality let me know and i’ll definately post it to this site.
@Felix: yea, you can use AJAX at the same time as the callback function… You just need to put your own AJAX function in the callback function… see the page of examples: http://davehauenstein.com/code/inplace.php and look at example 4. If you still don’t get it post another comment and I’ll write the code for you.
@Rob: Sorry i missed your comment before… but that’s actually a good idea that you have and right now I’m not sure if it can be done with the current setup. I’m going to try to look into it tonight and see what i can do for you. I’ll send you an email if i get somewhere…
That’d be great if you could come up with something! Been puzzling me for a while and I don’t have time to modify/write my own version of the plugin as my deadline is getting a bit close! I did modify your plugin a bit so that the width of the text box that displays can be altered as well as the textarea, but I compressed it and forgot to save the uncompressed original!
Look forward to hearing from you.
Rob
I added one for myself, but it would be nice to have a way to control maxlength on the inputs…
good idea Vaska, i guess there’s still a lot of work to be done on this plugin… I haven’t had the time lately, but i’ll go through the code and add a bunch of refinements for version 1.0…
Dave…
If you could add support for arrays… then it would be wonderful..
thank you
:)
Any luck with the onclick functionality? I think my email may have been playing up so if you did send me something I never got it!
Rob
David,
This is the best overall in-place editor plugin for jQuery. Thank you!
Though very supplementary, I’d love this: click to edit, then the textarea appears without interfering with the line-height. In other words, a text-area appears sized to the exact dimensions of the editable DIV. (Save/Cancel buttons would have to float or otherwise function transparently.)
One more thing… the rest of the script seems to fail if it comes across an element that doesn’t exist on the page.
Hello! Thanks for this plugin.
As Pat said before, it seems that it doesn’t work if we generate a field after the page is loaded… Does it? If it does, what do I have to do? ^^
Thanks a lot and great job anyway!
Focusing the input/textarea would be stupendous!
Hi!
Great plugin, I like it!
But I have spent hours of “debugging” my code to figure out why something does on Firefox work but not on IE:
Even on your examples, if you click on an active for editing area, change something and then hit the enter key instead of clicking on “save”, the changes are gone on IE! On Firefox is works as it should / in a way that it is more usable and easy after typing some text: Not to get the mouse again, pointing and clicking on “save” - only hitting enter.
Can you give a hint please how to get IE having the same behavior as Firefox? And maybe it would be better to “correct” this also on your next release.
Thx
Billy
Hi man… thanx for the perfect plugin you’ve created. Thanx a lot for that!!!
I have one doubt… can i set error messages in this plugin? For exemple…. i’ve submitted a data from the input field and my Php file has verified that the dtata is invalid. Then i want to display some message in the application, like an JS alert, for exemple…. Can i do this with In-Place Editor?
Thanx for the help!!!
Hi, this is a nice Plugin. Thanks for the great work.
It would be very nice, when it would support following features:
- onblur : cancel Clicking outside editable area cancels changes. Clicking submit button submits changes.
- onblur : submit Clicking outside editable area submits changes.
- onblur : ignore Click outside editable area is ignored. Pressing ESC cancels changes. Clicking submit button submits changes.
- postload: for loading content after click (important, if shown text differs from real content)
These features are implementet in jEditable by Mika Tuupola, but that plugin has not as good callback function as yours. I use both, but using only one would be better.
Thanks and greets
Yasin
Hello! Thanks for your plugin.
i was a chinese student.
i wants you know that your plugin was round all over the world.
many people from another country also know your Great plugin !
I want use yor code but before i’m having a question
Dou you have a solution to edit a picture and a date(calendar) in edit in place ?
thx for your help
How do I get the callback function to receive the HTML element that triggered the callback? RIght now I’m getting ( undefined, new_html, old_html, ajax_params ) . I’m setting the handler with $(”span.inline”) for all the spans with the inline class.
Hi Dave. Is it possible to show us your inplace.php code? I’ll want to convert to ColdFusion code. Congratulations for this piece of code!
I’d cancel the comment I made earlier–I solved my problem and it wasn’t related to the plugin.
Hello!
How I can add attributes such as ‘class’ or ’style’ to elements ‘input’, ‘textarea’, ’select’?
Thanks,
Vitaliy
if this will complete edit when you click outside the form, will be the coolest thing
anyway, this is great plugin.
I have the same issues with IE. Hope it is fixed soon. A couple other things I miss from jEditable.
* Only one editable element at a time (onblur should cancel changes and revert text)
* Make the add and cancel buttons optional
Looking forward to these updates
One other thing that is kind of annoying is that when you click to edit something it will not focus into the field you are editing. Can this be fixed?
Thanks, great work here btw…
Sorry to bombard you with questions, but other than the focus thing which is important, I would like to have my buttons show up under the text area edit box. I’m sure this is as simple as a line break before the buttons. Can you tell me where in the JS I can add that? Maybe it could be an option?
Didn’t research to see if this had other repercussions, but I added an escape() around new_html on line 256. Otherwise a semicolon would stop text input.
data: settings.update_value + ‘=’ + escape(new_html) + ‘&’ + settings.element_id + ‘=’ +
Nice in-place editor, I like it. A few tips for users:
- For the user hitting enter in IE, you may be able to use jQuery to capture the keydown event for the input element.
- There’s also an “error” setting that you can override with your own function. This allows to you handle server-side validation by having your server return a 500 error along with an error message if the submitted value is invalid.
Hi David,
Nice plugin for jquery. My question is can this be used with dates? I’m having trouble passing the proper format back to my update page, when I use an alert it seems as if the in place editor script is removing the spaces so the format comes out something like ‘7/25/20079:00:00AM’. I believe the missing space between the 7 in 2007 and the 9 in 9:00:00AM is causing the problem. Am I doing something wrong?
Thanks for any help.
Josh
When is it going gold?
Just like everyone else is saying, wonderful plug-in. This is the best out of the bunch on the jQuery page for in-place editing! I need to be able to use a button, like ‘edit’ or just an object besides the text itself to trigger the input/textfield editing. I’m going to take a look at the source to see what I can implement myself, but if you’ve updated it recently and added this functionality, it would be great to see it! Thanks, and keep up the awesome work.
to disable inline-editor-form submitting under IE you can change that line
jQuery(this).html('’ +use_field_type + ‘ ‘ + buttons_code + ‘’);
hello from Ukraine!
oops! comment problem?
so, change it to that line
jQuery(this).html('’ + use_field_type + ‘ ‘ + buttons_code + ‘’);
jQuery(this).html(’<form class=”inplace_form” style=”display: inline; margin: 0; padding: 0;” onsubmit=”return false”>’ +
use_field_type + ‘ ‘ + buttons_code + ‘</form>’);
Exactly that problem above I experience too. I think i try to fix it on my own, if Dave will not make it soon ;>
ok, i did it on my own.
my version of this plugin is pretty much customized due to my special requirements, so i cannot just paste the code here. (and i extended the plugin off version 0.9.6, therefore my code would not be very useful)
although here the snippet which prevents the form of submission in IE:
if($.browser.msie && settings.field_type == “text”) {
$(this).keydown(function(e) {
if(e.keyCode == 13) {
//save the data…
Hey there, it’s me again. I fixed my earlier problem…but now I have a new one. I wanted to have my ‘Edit’ link open up a group of text fields, and I succeeded…but only by making a trigger call to the ’select’ functionality within this plugin.
This works, but the problem is that it makes N posts to the back-end where N is the number of fields I have being triggered. This was an ugly work-around…and now I need to make it so it does ONE post per save, not N posts per save. Hmm…any ideas?