Another In-Place Editor, jQuery Plugin
Check out the blog that i actually update. davehauenstein.tumblr.com
BIG UPDATE: (07-16-2008) ADDED SOME FEAURES! Added a bunch more parameters to customize this. On blur can either save or cancel the editing. Lots of bugs fixed, etc… I also added a BSD licence to it. Download and check out!!!
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 1.0 Source July 16, 2008
- Version 1.0 Packed July 16, 2008
- Version 1.0 Minified July 16, 2008
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
- default_text - text to show up if the element that has this functionality is empty
- select_text -default text to show up in select box
- 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
- show_buttons - will show the buttons: cancel or save; will automatically cancel out the onBlur functionality
- on_blur - what to do on blur: “save” or null; default: “save”; will be overridden if $param show_buttons is true
- callback - call function instead of submitting to url
- success - this function gets called if server responds with a success
- error - this function gets called if server responds with an error
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?
Great plugin - I’m running into some issues right now, namely if someone updates a text area with an ampersand “wow & cool” for ex, it gets chopped off before the ampersand “wow”
I’m also trying to debug w/ FF and Firebug but when clicking “save” there is nothing sent in the “post” in the xhr tab. What’s going on?
hello Dave!
I like your work on this plugin this far…
i have just one question…as a novice i want to know how should i make this plugin work ie. save data that i changed?
thx!
Looks excellent. I tried jEditable and it gives javascript errors in Firefox. What’s your licensing policy for your code?
Hi Dave
I use heavily your plugin in my CMS so I wanted to thank you for this excellent little piece code!
I also wanted to share the change I made to the script, in order to define the TEXT input size, because it’s useful when you use the plugin through differents formats :
a default value for the input text size:
var settings = {
…..
text_size: “30″,
….
}
and the corresponding output in the source:
var use_field_type = ‘’;
Thanks again
where can i download all the source code the php files. i tried it and it aint working.
Hi Dave,
Wonderful utility. I could find it out by trial and error, but I figure others may also want to know. Do the params have to be escaped?
Thanks
Serge
Hello,
Is there a way I can pass 2 different parameters per field? Like I need an option to change employees’ nick names inline from a list of employees. So I’ll need to pass employee_id also along with employee_name.
First of all I thank Dave for such a good plugin,
I had to modify the script so it can show the new updated value
on line # 285
var new_text = html || settings.default_text;
I changed it to
var new_text = html || new_html;///settings.default_text;
so it shows the new value once the ajax update is successful.
Hi - Thanks for making this available to everyone. It’s a great little plug-in that was just thing I was looking for.
Cheers
Great Script - thanks so much. As someone migrating from Prototype, this was kind of a must.
Anyways, one little error I think I found. It has to do with your new “Esc” key meets jQuery.noConflict().
$(document).keyup(function(event){
should be
jQuery(document).keyup(function(event){
Thanks much for putting the no conflict in there, I definitely need it on for a current project.
on line 203 you use the $(document) syntax instead of jQuery(document) like the rest of the file so it is not compatible with prototype. A quick change to that one line fixed it for me.
hi, i download your source file and test it. it happend some question.
maybe i still don’t konw how to use it…
first, see my test link:http://www.4esign.cn/labs/jQuery/jquery-inplace/
it coyp all your source of sample page, but when i save it,it happend wrong…
would you share a full files example file to us? thank you!
It seems to me there is a problem with the callback function : the first argument (original_element) is always ‘undefined’… How come ?
nevermind…I just checked the code and it returns the id instead of the element itself… That’s not very intuitive when you call it “original_element”, and it has to have an ID for it to work…I’m gonna tweak this in my version.
Hi,David, I have a suggestion:Can you add a anthoter selection for using links instead of the “Save” and “Cancel” buttons?
First, thanks for this. It’s much cleaner than the other edit in place scripts.
I made a slight modification to your code. I added a “type” parameter to the settings, defaulting to post, and used that in the ajax call as “type”. That way, you can specify PUT for RESTful operations, if you so desire.
Hi Dave. Is it possible to show us your inplace.php code? I’ll want to convert to Perl code. Congratulations for this script!
How can I chenge default ‘Click here to add text’ to some custom message? Didn’t find option.
продвижение интернет сайта основы продвижения сайтов
Below my PHP code to go with this script:
In select boxes (dropdown) isn’t it possible to display one text and send another value to ther server? Like an ID of that text. I think this is a must!
Great Job Dave!
Just one question.
Are there any known issues with Opera9?
diJenerate
Where you are using the ID to trigger actions, if you have multiple iterations of them on the same page,will you need to iterate through the creation of the elements within the
$(document).ready(function() {?});
hai dave,
I did not able to understand about inplace.php. please explained about that
regards
babu
Dave…
Is it possible to use this plugin without an AJAX call? I’ve got a page in which I’d like to use this plugin. Rather than a single server call with each change, I’d prefer to write the changed content to a hidden form element, then submit the whole thing at one time.
Is this possible, and how would I go about doing so?
@Andy - Check out example 4 in the examples page: http://davehauenstein.com/code/inplace.php - if you use a callback function it doesnt call the ajax function.
Actually I think I found it. The callback method is what I’m looking for. Just from a best practices point of view, you might consider changing the parameter name, or the way it’s used. When a callback function is referenced, it’s typically on successful use of the primary method, after that method has completed. In this case, you’re overriding the default behaviour, which is an AJAX call.
Glad it’s in there regardless. Thanks.
@Andreas - yea, there is, just check out the examples page and you’ll see in the select box dropdown source code how it’s done.
I noticed that your plugin defines it own trim function. Have you thought about using jQuery’s built-in trim method instead? http://docs.jquery.com/Utilities/jQuery.trim
Hi Dave,
Any method to load data from db and fetch them into textarea due to maintain custom tags present inside the text you are going to modify.. like Jeditable does using loadurl parameter?
Tnx for your answer
Thank you for a very useful plug in.
I’m trying to make this work in conjunction with another jQuery plugin, markitup, so that when the textarea appears, I’ll also get some wysiwyg editting functionality. But I can’t seem to make that work. The jQuery call for markitup is set to turn any textarea into an editor, but it’s not happening when the textarea appears from the inplace editor.
Thank you for your help.
I was using your tool and found an issue (feature?) when the text you want to edit is HTML all the HTML code gets removed due to the use of .text() instead of .html(). I modified the file line 154 to
var use_field_type = ‘’ + jQuery(this).html().trim().escape_html() + ‘’;
which worked for me as all I was using was the textarea editor.
Otherwise the plugin works great. Thanks.
Dylan
This plugin appears to be working quite well for the project on which I’m using it. I have a case though that I wanted to run past you.
I’m applying InPlace, as textarea, to a container which has HTML in it. When the plugin loads the textarea, it appears to be getting the text() of the container element, rather than the html() of the container. or at least it’s only displaying the text of the element. I’m hopefully looking to use this plugin to create a rich text editor “in place” and having the core HTML is essential to that.
Any thoughts?
this plugin is great but i am wondering if it is possible to use fckeditor to replace textarea for this plugin ? any helps?
Dave,
You are a GENIUS !!
tried jeditable but it was slow once there is hundreds of editable in a page…
Yours is loading the page instantly…
Best regards,
Andras Kende