My Home Page

What is it?

Another In-Place Editor is a jQuery plugin that turns any element or group of elements into an Ajax in-place editor using only one line of code. It’s written using the jQuery Library, which is available free at http://jquery.com. I saw this on Flickr a while back and I thought it was really great how you can update the title and description of a photo without having to go to an admin page.

Some Features

• Esc key will cancel an active editor
• On blur will by default cause the editor to submit the value to the server. This can be overridden to cancel the submission.
• Submit to a callback function to handle the in-place submission, rather than submitting to a URL
• Optional validation of a blank field; By default if the field is blank, the form won’t submit and the user will receive an alert

Demo

http://davehauenstein.com/code/jquery-edit-in-place/example/

Usage

It’s extremely easy to implment! The code below looks for an element with a class value of ‘name’ and applies an in-place editor to it. These are only a few of the parameters that can be passed into the editor. See below for a full listing of the parameters. It’s highly customizable. view plaincopy to clipboardprint?

$(".name").editInPlace({
    url: "http://com.examplesite.www/users",
    params: "name=david"
});

Once the in-place editor form is submitted, it sends a POST request to the URL that is specified in the editor’s parameters along with three form fields:

• original_html; the original text in the in-place editor container
• update_value; the new value of the text from the in-place editor
• element_id; the id attribute of the in-place editor

Parameters

• bg_out (string) default: transparent hex code of background color on restore from hover
• bg_over (string) default: #ffc hex code of background color on hover
• callback (function) default: null function to be called when editing is complete; cancels ajax submission to the url param
• cancel_button (string) default:

  <input type="”submit”" class="”inplace_cancel”" value="”Cancel”">

  </input>

  image button tag to use as “Cancel” button
• default_text (string) default: “(Click here to add text)” text to show up if the element that has this functionality is empty
• element_id (string) default: element_id name of parameter holding element_id
• error (function) this function gets called if server responds with an error
• field_type (string) “text”, “textarea”, or “select”; default: “text” The type of form field that will appear on instantiation
• on_blur (string) “save” or null; default: “save” what to do on blur; will be overridden if $param show_buttons is true
• original_html (string) default: original_html name of parameter holding original_html
• params (string) example: first_name=dave&last_name=hauenstein paramters sent via the post request to the server
• save_button (string) default:

  <input type="”submit”" class="”inplace_save”" value="”Save”">

  </input>

  image button tag to use as “Save” button
• saving_image (string) default: uses saving text specify an image location instead of text while server is saving
• saving_text (string) default: “Saving…” text to be used when server is saving information
• select_options (string) comma delimited list of options if field_type is set to select
• select_text (string)default text to show up in select box
• show_buttons (boolean) default: false will show the buttons: cancel or save; will automatically cancel out the onBlur functionality
• success (function) default: null this function gets called if server responds with a success
• textarea_cols (integer) default: 25 set cols attribute of textarea, if field_type is set to textarea
• textarea_rows (integer) default: 10 set rows attribute of textarea, if field_type is set to textarea
• update_value (string) default: update_value name of parameter holding update_value
• url (string) POST URL to send edited content
• value_required (string) default: false if set to true, the element will not be saved unless a value is entered