In-line editing lets you edit text right where you see it. No need to switch to a new page to make changes: just click the text and make the change immediately. Your changes become effective right away.
Inline edit plugin improves editing experience. Inline skating changing the way you walk. Today, we took time to collect some popular plugins as below which you can not afford to miss.
On one of my web projects I’ve been working on, we needed to allow the user to edit some information on their profile page. I could have written an HTML form page and then written the php database updater, but why use such outdated interfaces? This is the era of AJAX, and you can’t deny it. AJAX is pretty sweet. I decided on using flickr-like editing boxes to do the job. If you are not familiar with how flickr handles editing data, here’s a short summary.
A jQuery plugin (based heavily on jEditable) that allows cells in a table to be edited and posted to a server ajaxically.
Jeditable – edit in place plugin for jQuery
How does in place editing work? Normal flow is this. User clicks text on web page. Block of text becomes a form. User edits contents and presses submit button. New text is sent to webserver and saved. Form becomes normal text again.
An AJAX (or AHAH) proof-of-concept page that allows the visitor to edit the very (x)HTML page they are viewing, without leaving the page. Click the text to be edited and magically a textarea appears with buttons beneath to save or cancel the changes. Changes are sent via AHAH to a PHP script which normally would be used to update a database (MYSQL or flatfile).
Another In-Place Editor is a jQuery plugin that turns any element or group of elements into an Ajax in-place editor using only one line of code. It’s written using the jQuery Library. I saw this on Flickr a while back and I thought it was really great how you can update the title and description of a photo without having to go to an admin page.
TableEditor provides flexible in place editing of HTML tables. User defined handler functions can easily be dropped in to, for example, update the data source via an AJAX request.
Here is swimming lesson number one. Anyone who’s used Flickr to publish their photos will be familiar with the edit-in-place system used for quickly amending titles and descriptions on photographs. Hovering over an item turns its background yellow to indicate it is editable. A simple click loads the text into an edit box, right there on the page.
The author remade inlineEdit for the new version of MooTools. It’s a component. You build on it. Like I did in my save example. So yes, it’s simple, but its a powerful base for you to build stronger things with.
Edit in place (also called in-place editing) follows the axiom Alan Cooper calls "allow input wherever you have output". The combobox – a form element unfortunately absent from HTML – demonstrates this. In the same place where the current selection is displayed, the user can enter a value directly.
This is the first example of Ajax I am showing with a write to the DB, and this will show just how easy it really is. Also, you will notice that the CSS changed a bit, that is because this plugin has a hover property that resets the background of the td, and that gave a funky interface; now this can be taken care of with some jQuery magic pretty easily, but that is outside the scope of what this is trying to show.