Inline Editing Using Ajax
See Ajax: Tips and Tricks for similar articles.Sometimes it is nice to be able to edit a page without displaying form elements by default. For example, if you want to allow people who are logged in as administrators to edit sections of a page, you could make it so that the administrator could click on those sections to turn them into form elements and perform inline editing using Ajax.
First, let's look at a simple table that shows the presidents' first and last names:

The neat thing about this table is that the names become editable when double clicked:
All the user has to do is type a new value and tab out or click anywhere else in the document to change the value in the table. An XMLHttpRequest is used to change the record in the database.

This page is generated by the Node.js response route /Presidents in MoreAjaxApps/Demos/server.js and rendered by the MoreAjaxApps/Demos/Presidents.jade template. The server-side code queries the "Presidents" database to retrieve a list of all presidents' IDs, first and last names, and bios, and returns those data as an HTML table.
For these examples to work, more files are required than are available in this how to. To see these examples in action, take the Ajax training course.
- The following code queries the database for the presidents' first and last names and biographies (taken from the Whitehouse website9) and then iterates through the result set creating a table row for each president. Each td element has the editable class. The Jade template includes a call to MoreAjaxApps/Demos/inline-editing.js, which does the real work:
function enableEditing() { var editableElems = getElementsByClassName(document, "editable"); var numElems = editableElems.length; for (var i = 0; i < numElems; i++) { observeEvent(editableElems[i], "dblclick", editElem); } } function editElem(e) { var target = getTarget(e); var input; var textLen = target.innerHTML.length; if (textLen > 30) { target.innerHTML = "<textarea cols='120' rows='6'>" + target.innerHTML + "</textarea>"; } else { target.innerHTML = "<input value='" + target.innerHTML + "'>"; } var input = target.firstChild; input.select(); observeEvent(input, "blur", saveCell); } function saveCell(e) { var target = getTarget(e); var td = target.parentNode; var tr = td.parentNode; var field = td.title; var value = target.value; var pid = tr.id; var xmlhttp = new XMLHttpRequest(); xmlhttp.open("POST", "SaveCell", true); xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { td.innerHTML = target.value; blinkText(td, 1000, "Saved", "Normal"); } } xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=UTF-8"); xmlhttp.send("field=" + field + "&value=" + value + "&pid=" + pid); } function blinkText(elem, time, on, off, timePast) { var timePast = timePast + 100 || 0; if (hasClassName(elem, on)) { removeClass(elem, on); } else { addClass(elem, on); } if (timePast < time) { setTimeout(function() { blinkText(elem, time, on, off, timePast) }, 100); } else { removeClass(elem, on); removeClass(elem, off); } }
- Now let's review this JavaScript library functions so you can understand the code:
enableEditing()
Gets all the elements with the "editable" class using thegetElementsByClassName()
function from lib.js and attaches theeditElem()
function to their double-click events.editElem()
Changes theinnerHTML
of the double-clickedtd
to an input ortextarea
tag (depending on the length of theinnerHTML
) and attaches thesaveCell()
function to its change event.saveCell()
Uses Ajax to send the field, value and president id to SaveCell.jsp, which updates the record. The inline callback function changes theinnerHTML
of thetd
to the new value and callsblinkText()
.blinkText()
Toggles the class name of the passed in element (elem
) between the passed-inon
andoff
values fortimePast
milliseconds. This creates a blinking effect.
- In addition, HTML 5 includes a
contenteditable
attribute that can be applied to almost any element, though Internet Explorer does not allow it on elements that make up tables (e.g,table
,tr
,td
, etc.). All you have to do to make an element editable is addcontenteditable="true"
to the tag.
Of course, when the user changes content on the page that doesn't have any permanent effect. You, as the developer, have to catch that change and do something about it. When an editable element loses focus, a blur event is triggered (there is no change event). You can use the<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>Content Editable</title> </head> <body> <p contenteditable="true" style="font-size:xx-large">I am editable.</p> </body> </html>
blur
event to trigger Ajax code that saves any changes the user made.
Related Articles
- How to Make a Cross-origin Ajax Request
- How to Create a Login Form with Ajax
- How to Set Up Automatic Session Timeout with Ajax
- How to Use the Callback Function in Ajax
- How to Develop a Web Application with Ajax
- How to Make GET, POST, and HEAD Requests Using Ajax
- How to Use the jQuery ajax() Method
- How to Create a Lookup Form with Ajax
- How to Create a Slideshow with Ajax
- How to Handle the Response from the Server in Ajax
- How to Set Up for Ajax Training on Windows
- Inline Editing Using Ajax (this article)
- How to Create a Navigable Table with Ajax