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)
- Create a update file that handles the input. For example this PHP: Update File
- 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 arround it:
<span id="userName" class="editText">John Doe</span>
Note: id is the fieldname (?userName=John Doe&), and should be unique!
How it works
This script works in Internet Explorer, Firefox, Chrome, Opera and Safari.
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.