Introducing the jQuery in-place-edit Plugin
Introduction
The jquery-in-place-edit plugin is a lightweight and customizable jQuery extension that allows you to easily add in-place editing functionality to your web applications.
Features
- Templates that allow you to customize the look and feel.
- Callbacks that allow you to add and change the default behavior.
- Lightweight and easy to understand: allows you to modify it to fit your needs.
Installation
JavaScript
Inside the head tag, first include the jQuery JavaScript file then the jQuery in-place-edit file:
<script type="text/javascript" src="javascripts/jquery.js"></script>
<script type="text/javascript" src="javascripts/jquery.in-place-edit.js"></script>
CSS
Add the following styles to your CSS file; you can change them later:
</code> <style type="text/css"> ul.in-place-edit { list-style: none; margin-left: 0; } ul.in-place-edit li { width: 150px; margin: 0px; padding: 3px; } ul.in-place-edit .field { width: 99%; } .hover { background: #727EA3; color: #FFF; } .editing { background: white; border-top: 5px solid #ccc; } .disabled { background: none; color: black; } .buttons input { font-size: 10px; } </style>
That’s all there is. You’re now ready to start using the plugin.
Basic Usage
There are three additional steps involved in getting the plugin to work:
- Adding in-place-edit elements to your HTML
- Loading the in-place-edit plugin
- Defining event handlers
HTML
Adding in-place-edit elements to yourIn this example we’ll use a paragraph:
<div class="in-place-edit">
<p id="item-1">Do the dishes</p>
</div>
Remember to set the id to something unique, for example a database ID. This way you can identify which database record you need to update.
Loading the in-place-edit plugin
Now you need to tell the plugin which DOM elements you want it to add the in-place-edit behavior to. This is done with jQuery selectors and a call to the inPlaceEdit method, as shown in this example:
// Enable in-place-edit when document is loaded
$(document).ready(function(){
$(".in-place-edit").children().inPlaceEdit({
submit : submit_handler,
cancel : cancel_handler
});
});
Defining event handlers
Note that earlier we defined two event handlers in the document onload handler: submit and cancel. I think you can guess what they do, so I won’t explain…
The last step is to add the following code above the document onload handler:
var submit_handler = function(element, id, value) {
alert("Edited id '" + id + "' value '" + value + "'");
return true;
};
var cancel_handler = function(element) {
// Nothing
return true;
};
Task complete. Test in your browser or have a look at this example’s code.