editInPlace 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 freely available at http://jquery.com.
Bug reports, as well as feature requests, may be submitted on the google code page
Include jquery and the editin place scripts in your html page (preferably at the bottom so the page loads faster).
<script type="text/javascript" src="https://github.com/hanigamal/jquery-in-place-editor/raw/master/path/to/js/jquery.js"></script>
<script type="text/javascript" src="https://github.com/hanigamal/jquery-in-place-editor/raw/master/path/to/js/jquery.editinplace.js"></script>
<script type="text/javascript">
$(".inplace-editor").editInPlace({
url: "path/to/server/script.php"
});
</script>Create a div with the class 'inplace-editor'
<div class="inplace-editor"></div>Create a server side handler script (php, python, etc...), this example will use php
The following parameters will be sent via a POST requeset to the server script
e.g. in script.php:
$_POST['update_value']
$_POST['element_id']
$_POST['original_html']Alternatively you can set the option callback, so you can controll the whole saving process yourself (update other parts of the webpage and possibly not even save to the server at all). The editor accepts a wealth of other options to customize how it behaves. They are documented inline in the sourcecode and are exposed as $.fn.editInPlace.defaults where you can change them globally for your app. For more examples of how to use the editor, have a look at the demo html and javascript.
The Editor works in two stages. After initialization it is closed, wich means that it listens to a click on the element it was bound to. When clicked it will open, which means it replaces the content of the bound field with the configured GUI (input, textarea or select), preinitialized to show the value that was shown in that DOM element before. If the user then cancels or doesn't change anything, everything is returned to what it was before. If the user makes a change and commits, that new value is either submitted to the configured URL or to the configured callback and then the editor GUI is again replaced by just the edited value and the editor again listenes to a click.
To support automated acceptance tests better the editor will set the class .editInPlace-active as soon as it opens, and will only remove it when it has finished any interaction with the server or the callback interface has told it so.
More documenataion can be found on the google code page of this product
Thats it! Have fun using it!