According to coder Mika Tuupola, Jeditable (www.appelsiini.net/projects/jeditable) is a jQuery plugin providing inplace editing functions, which with a few lines of JavaScript, allows users to click and edit the content of designated HTML elements.
For example, when a user clicks editable text on a web page, the specified text block becomes a web form, allowing the user to edit the contents. A press of the submit button and the new text is sent to a server and saved, with the form becoming normal text again.
Another boon for power users is the ability to submit user edited content to a function rather than to a URL.
The live demo makes understanding its implementation easy.
Based on Dylan Verheul’s editable, which it supersedes, Jeditable is also available on GitHub, where the latest “bleeding edge” code is made available for the adventurous.
As to why you would want to add an inplace editing feature to your website, that all depends upon your own creativity and the needs of your users. Fortunately, how you do it is straightforward — with the plugin site offering numerous code and usage examples.
One example of the basic usage includes the following HTML elements:
<div class=”edit” id=”div_1”>Dolor</div>
<div class=”edit_area” id=”div_2”>Lorem ipsum dolor sit amet</div>
The only mandatory parameter is the URL where the edited content will be posted:
$(document).ready(function() {
$(‘.edit’).editable(‘https://www.example.com/save.php’);
});
In the example above, the code is doing several things: first, those elements with class “edit” become editable with a single mouse click using a text form input element that has the same width and height of the original element. If a user clicks outside the form then the changes are discarded — likewise if the user hits ESC. When the user hits “enter” the browser submits the updated text to the save.php file at www.example.com.
Of course there are a variety of available options for extending the base functionality, such as adding tooltips for informing users what they should do. The class edit_area will use a textarea as an input and displays a spinning image when data is submitted. Elements with class edit will have the text “Saving…” instead of the spinning image. CSS can also be used to style the elements as is normally done.
When submitting changes, a data set is POST:ed to your server containing the ID of the element along with the user edited content.
Values for pull down menus can be generated dynamically by fetching values from an external URL. For those who are concerned about the extra server request, PHP is usable for outputting a JSON encoded array directly into JavaScript code.
Another boon for power users is the ability to submit user edited content to a function rather than to a URL, with full control over the Ajax request and the same parameters are passed as with the URL callback. The only requirement is that the function must return a string, which is usually the edited content, displayed on-page after editing is completed.
Editing of the element can be triggered using the option event, with all jQuery events available, but click and dblclick are the most usable ones.
Miscellaneous options include altering the default action of what happens when a user clicks outside of the editable area, which is to cancel edits, but ignore and submit are also available for those users with specific needs.
Try it for yourself!
