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.
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.
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.
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.
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.
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.
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).
Demo
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.
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.
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.
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:
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.
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.
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.
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
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.
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.
For help, advice, tips and tricks, challenges, feel free to visit our
or Submit your good resource to share.
Reminder: Unless stated otherwise, all resources published on this site are NOT for commercial use. To use any resource from this site for commercial purposes, please contact the author.
