Inline Editing with jQuery
We’ve all heard of in-line editing. Flickr uses it for many things such as changing the title or description of one of your pictures.
For those of you who dont know, in-line editing is when you can just click on text, and it becomes a text box which the user can then edit. When the user hits enter, the edited text is sent to a script, which can do some magic, like submitting the text to a database.
Now, thanks to Dylan Verheul, doing this with jQuery could never be easier. He has created a plugin called Editable, which makes it possible to create in-line editing fields with one simple line of code.
$(element).editable(url, options);
The source code, along with a (broken fixed) demo can be seen here. I have put together a simple working demo on my website, here.
You’re right, my demo is broken. Must be because I switched to another webhost, I’ll look into it later today.
OK, my demo’s are fixed :-)
The demo seems to suffer somewhat from an over-zealous use of addslashes :) – other than that looks great!
Both demos are working, however the second one has an issue with apostrophes where it inserts a forward slash.
Great plugin though. I wondered if jQuery could easily do inline editing.
Oops, fixed my demo too. Forgot about MagicQuotes :\
Regarding blog posts – it would be nice if there was an author attached them so we (I?) know who’s talking :)
Yeah, john is working on the new design currently. When he’s done, you will all know who is writing, along with our gravatar for a little visual representation.
Wow, works with Unicode. Sweet!
☺
Maybe the saving should also be triggered by onBlur()?
When you don’t use the enter key you loose your changes?
Yeah i was thinking that too, but then you would have no way to cancel it. If you enter something then realize you didnt want to edit that one, there would be no way to cancel the entry.
Nice work. One improvement I would like to see would be indication that the item was saved outside of the item that was edited. If you want to edit twice you have extra text in there… Just a thought… thanks.
Im having a little trouble with getting the results back into the control when its changed, could you show the editable_post.php code, im just trying to figure out how post variables are checked for.
cheers guys.
@Drydenmaker, thats just an example. You could also have a callback function in the options, like this:
$(element).editable(“editable_post.php”, {callback: function(something) {
$(‘feedback’).show();
}, saving:””});
Note that hasnt been tested, but should work.
@Geezer, I have updated my page. Check it out.
Great… but…
How to differ the various input fields on server?
In PHP i get only $_POST[‘q’] for all fields.
ned, you have two options, since the plugin doesnt directly support that.
1. Make each element editable with a different line of code, and add extras, like {extraParams:{field:’Username’}} or something similar, then get the extras like $_POST[‘field’] or whatever.
2. Edit the plugin yourself to use the id or name of the element as a seperate parameter.
Got it working now. I added an additional option of size:
and added i.size = options.size;
in the function to allow me to set length of input.
worth pointing out if your using lots of differing variables on the page you need to adjust the classname.
“.$fullresult[“products_name”].”
$(document).ready(function() {$(“.products_name”).editable(“_getaddress.php”, {saving:””, extraParams:{products_name:1,orders_id:,orders_products_id:},size:70 });});
otherwise you run into problems with post variables getting all confused.
Fantastic plug-in, thanks guys.
On the onblur issue maybe keep the onBlurDelay option but add an onBlur param that you can attach a function to.
This looks very promising, so thanks for the hard work.
However, I’m having a little diffeculty understanding how to implement this so that I can update items in a list. I’m using ColdFusion and have the action setup to update a DB with the following parameters:
ID = #url.ID#
and
WebPrice = #url.price#
When I submit the field (#qCarsList.WebPrice# where the id will be price1 and qCarsList.WebPrice is the SQL query that gets the list of items) I get an error returned to the edit area saying the price was not found in the url scope. This means that the content from #qCarsList.WebPrice# isn’t being passed over.
I think where I need to do something is with the extraParams part of the Javascript, but I need some guidence here:
$(document).ready(function()
{
$(“.editor”).editable(“price.cfm”, { saving:””, extraParams:{id:42} });
});
Any help would be greatly appreciated.
Thanks in advance.