👋

As everybody knows, refreshing pages is so 1999. AJAX, DOM, whatever you call it makes it possible to let people edit a piece of text inline without having to use a submit button.
You say: but that ain’t new at all! I say: But all of this has been made easy to use and implement: 2.0!

Example page: inline edit (no JS knowledge needed) [source ] | Inline example: Please edit me!

How you can make it work (5 easy steps for integration)

• Download this javascript file: InstantEdit 2.0 JS
• Create a update file that handles the input. For example this PHP: update file
• In your page add the javascript:
• Optional: Set fixed vars (like hidden elements in a field post). These will be posted with the editable field so you can identify a user/session.
• Last step: in your HTML for any editable field add a SPAN around it.

You’re done!

How it works

A small piece of javascript reads all SPAN tags, checks if it has class=“editText” and a id=. If that is true, it adds a onclick function. That onclick function will create a textfield or input (depending on the size of the editable text). Someone has the ability to edit the field. When the text field is blurred, it will read the contents, and starts a XMLHttpRequest and ‘sends’ the content + fieldname + any set vars to an update file. That file will update your database, and reply with the newly set text and the textfield will disappear again.

Compatibility

This script works in Internet Explorer, Firefox, Chrome, Opera and Safari.

Update hack

If you want to force a textarea over a textfield (for example to edit a piece of HTML) use class=“editText” offsetHeight=“10”.

If you want to PUSH an ID to your script I use: id=“edit_userID_$userID”. In your update script, strip the text, and keep the $userID. Et voila.