Collection of AJAX Inline Edit Plugins

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.

www.donotyet.com 20091004000 Collection of AJAX Instant Edit Plugins Inline1

AJAX inline text edit 2.0

A small piece of javascript reads al 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. This is a very simple script which only works with span tags. Text from the span html tag is sent to update.php which process the request. Plain html is returned from the server and this result populates the span.

www.donotyet.com 20091004001 Collection of AJAX Instant Edit Plugins inline text edit

DemoDemo DownloadDownload

Create flickr-like Editing Fields Using AJAX & CSS

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.

    www.donotyet.com 20091004002 Collection of AJAX Instant Edit Plugins flickr-like

    DemoDemo DownloadDownload

    tEditable – in place table editing for jQuery

    A jQuery plugin (based heavily on jEditable) that allows cells in a table to be edited and posted to a server ajaxically.

    www.donotyet.com 20091004003 Collection of AJAX Instant Edit Plugins tEditable

    DemoDemo DownloadDownload

    jQuery jFrame

    Thanks to jQuery library, jFrame provides an easy way to get an HTML frame-like behavior on DIV Elements with AJAX. It comes with Pimentech Scripts library. Also available on jQuery site. With jFrame, you can build smart, complex modern, internet apps without leaving the main page, without a single line of JavaScript! A jFrame is a DIV tag with a src attribute. In a jFrame, click events on <a> and <input type="submit"> tags will be handled by jFrame and loaded in Ajax.

    www.donotyet.com 20091004004 Collection of AJAX Instant Edit Plugins jFrames

    DemoDemo DownloadDownload

    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.

    www.donotyet.com 20091004005 Collection of AJAX Instant Edit Plugins Jeditable

    DemoDemo DownloadDownload

    Edit in Place with Ajax using jQuery

    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).

    www.donotyet.com 20091004006 Collection of AJAX Instant Edit Plugins edit in place

    DemoDemo
    jQuery Plugin – Another In-Place Editor

    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.

    www.donotyet.com 20091004007 Collection of AJAX Instant Edit Plugins in-place editor
    DemoDemo DownloadDownload

    TableEditor
    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.

    www.donotyet.com 20091004008 Collection of AJAX Instant Edit Plugins tableeditor

    DemoDemo DownloadDownload

    Edit-in-Place with Ajax using Prototype

    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.

    www.donotyet.com 20091004009 Collection of AJAX Instant Edit Plugins prototype

    DemoDemo

    Ajax Edit In Place with Yahoo UI API

    You’ve probably seen the article at 24 ways about Ajax in-place editing, but honestly the javascript they code up there seems quite hacky and un-standards-compliant. Instead, we’re going to use the Yahoo UI Library (YUI, YUI-EXT), a modern cross-browser javascript toolkit, to accomplish the same results with less hassle, and more power. The effect we want is like Flickr’s edit in place descriptions:

    www.donotyet.com 20091004010 Collection of AJAX Instant Edit Plugins yahoo

    DemoDemo

    InlineEdit

    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.

    www.donotyet.com 20091004011 Collection of AJAX Instant Edit Plugins inlineedit

    DemoDemo DownloadDownload

    Seamless inline text editing with ASP.NET AJAX

    This is a technique that I really like. It’s excellently suited to intranet sites and administrative interfaces, where your users are typically familiar enough with the application to know which text they can click to edit. It’s actually very easy to implement, with a small amount of JavaScript.

    www.donotyet.com 20091004012 Collection of AJAX Instant Edit Plugins inline-text-editing

    DemoDemo DownloadDownload

    Edit in Place with JavaScript and CSS

    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.

    www.donotyet.com 20091004012 Collection of AJAX Instant Edit Plugins edit in place

    DemoDemo DownloadDownload

    Light Speed Inline Editing Using ASP.NET AJAX and Web Services

    If you ask people what the most important thing that they want for web based application UIs, most of them will answer "I want to edit data really fast, like in Excel!" That is a tough request. It means that the person wants to click on a row, edit some data, then click on another row, and have all the data saved into a database. The Inline Edit Controller (IEC) is JavaScript solution that resolves all our problems

    www.donotyet.com 20091004014 Collection of AJAX Instant Edit Plugins light

    DemoDemo DownloadDownload

    Inline editing with DB write : ‘REAL’ AJAX with Asp.Net Series

    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.

    www.donotyet.com 20091004015 Collection of AJAX Instant Edit Plugins db write

    DemoDemo DownloadDownload

    AJAX In Place Rich Editor

    Using the great libraries Prototype 1.6, Script.Aculo.Us 1.8 and TinyMCE 3.2, IPRE provide a really easy way to implement an in place AJAX-powered editor using WYSIWYG.

    www.donotyet.com 20091004016 Collection of AJAX Instant Edit Plugins rich editor

    DemoDemo DownloadDownload

    Leave a Reply

    Your email address will not be published. Required fields are marked *