There are many excellent scripts to edit something inline using javascript (like jeditable), but not many that work standalone. If you hate wanting to include a 50 KB library just for this simple functionality, you are in the right page. This script is tiny (2.2 kB minified) and works on most modern browsers.

[download type=”demo” url=”http://iambot.net/demo/editable/”]Demo[/download]

[download type=”download” url=”http://iambot.net/dScript/download.php?fname=./editable.zip”]Download[/download]

Steps

1) Include the editable.js file in your page

2) Add the attribute class=”editable” to a division, paragraph or any other non-editable element (input boxes, textareas don’t work!)<td>. If you want the cells of a table to be made editable, simply add the class=”editable” to the table element and NOT to the table cells (td element) themselves

4) At the bottom of the page, initialize the script by adding EDITABLE.init(); within the script tag.

5) If you want the updated value to be updated in the server, simply add the url to which the data must be sent within the init function:

EDITABLE.init(‘http://example.com/update.php’);

The ID of the element that was updated, and the updated value will be sent as parameters with the URL (GET) in this form:

http://example.com/update.php?id=div1&value=newvalue

Please note that you will have to sanitize the updated value before storing in the database!

6) Click on the element for it to turn into a text box. Update the value, and press enter to save. Press tab or click anywhere on the page to discard updates and revert to the old value

Changelog Version 0.4

• Support for select boxes. The select options have to be initialized before EDITABLE.init() is called
• Support for setting a value that is returned from the server after updating
• Few minor bugs fixed, and some code cleaned up

Version 0.3

• The script is now in its own namespace EDITABLE
• Initialize the script by calling EDITABLE.init() at the bottom of the page
• Passing a URL in the init() method will send the ID and updated value of the element to a server side script using AJAX/

Version 0.2.1

• Fixed bug in IE

Version 0.2

• Support for all major browsers
• Table cell editing more robust
• Added support for IE 7 and 8. Uses ie.js for support for getElementsByClassName

Initial Release

• The editable box now fits to the size of the original element. You can see that in the demo
• Support for inline table cell editing is now included (Proper layout/orientation only work in FF for now. Horribly out of place in other browsers and will be fixed later)
• Editing of an element with other HTML tags now works better

Gotchas:

1) The size of the editable box doesn’t fit to the size of the original element when the DOCTYPE tag is added to the HTML page.

The text box doesn’t fit to the size of the original element (will be fixed)

Tested On:

Windows - Firefox 3.6, IE 7 & 8, Chrome

Mac - Firefox 3.6, Safari 4, Chrome

Terms:

Free to use for personal or commercial purposes, but please give credits

Notes:

I know it can always be better, and I’m just a beginner. So comments, suggestions always welcome!