Another In-Place Editor, jQuery Plugin

Created by: Dave Hauenstein, http://davehauenstein.com/code/jquery-edit-in-place
Modified by: S. Brent Faulkner, unwwwired.net

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.

Modifications

This version of the script contains modifications made by S. Brent Faulkner. The modifications include:

• addition of the edit_after_error option
• addition of a cancel callback function
• don't cancel blur effect when buttons are shown, instead support explicit "cancel" on blur

Examples

Check out this page with examples. It shows a bunch of different ways the script can be implemented and the code examples.

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", "cancel" or null; default: "save"

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
edit_after_error - if set to true, editing will not end when an error occurs; default: false

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