Jquery Editable Text

[bharathi]

Hi Everyone..
I need a jquery function that edit a text on onclick and save the new text in database on mouseout.. Please help me.. Thanks in advance..

[SuzyUK]

Hi bharathi,

perhaps a search for "Edit-in-Place with ajax jQuery" and or/plugins for the above might turn up something suitable

I found a jQuery tutorial
[docs.jquery.com...]

also there seem to be quite a few plugins available for this functionality, e.g. Jeditable - Edit In Place Plugin For jQuery.

this might give a starting point, or maybe someone else will come along who will be able to help more

[kceleb9]

I think the plug ins are a good place to start - but there is alot of variability in quality among them - so you want to look for something tested cross browser. That said - and edit in place is not super hard to "roll your own"

one of the things many plug ins overlook is that you really want a visual cue that something got saved for the users - even a quick appearance of the word "saving..." that fades out - means alot to the user. Edit in place where it's not clear that the change did get saved often causes users to start doing random clicks to try to get things saved.

with jQuery just attach a "click" event to your text - and replace the text with an input in the resulting function. Then attach an OnChange handler to the input (and have an explicit save button) - and fire off your Ajax save in a separate function. Hope that helps.

[DrDoc]

While this can be accomplished several different ways (and the examples provided are an excellent place to start), the most important thing to remember is the event handler. You only want specific elements editable, and as such should either explicitly add the onclick attribute to those elements, or implicitly by adding to all elements of a given type, or elements that are children of a specific parent.

Once that's done, yes, actually handling the editing is not too bad. Although, I would certainly opt for a button click instead of a simple

onmouseout

to confirm the edit.