Why do we need another in place edit library for Javascript? This one is different of course! This library allows for a high degree of customization due to its modular nature. Each action on an in place edit object (submitting on blur, adding a class on focus, toggling a label on click, etc) is complete isolated and designed to stack with each other. This allows for one library to accomplish a wide variety of in place edit functionality in the same project. You can even have different functionality on the same page if you wish.
Setup is a breeze. Just grab the latest copy of the Javascript library from https://github.com/bsimpson/in_place_edit. You will need to be using jQuery in your project, since this plugin depends on it to work. Once you have include both jQuery, and in_place_edit.js, you can initialize it like this:
$(function() {
$('.in_place_edit').inPlaceEdit();
});
The argument passed is the CSS selector that contains the form on which you wish to use in place edit.
Next, we need to configure the form to tell it what actions we want it to perform. If we want basic edit in place functionality, we can add “submit_on_blur” to have the form submit when a blur event is received. Note that this only occurs if the contents of the form have changed, in order to save on the number of server posts.
<div class="in_place_edit" data-in_place_data="submit_on_blur">
<form action="#" method="post">
<input type="text" name="foo" value="foo" />
</form>
</div>
The options are simple, and the combination are many. Check out the following options to see what you can do with your form fields on the DEMO page.
Happy in place editing!
Update: This plugin has been updated to be a jQuery plugin. Thanks to jsumners for providing lots of help!
Zone of Mr. Frosti 