Hack 66. Create an In-Place Editor Field | Ajax Hacks: Tips & Tools for Creating Responsive Web Sites

Allow users to edit text right in the web application, without experiencing any page refreshes or rebuilds.

You might have used a wiki beforeit's a web page whose users can edit its content. script.aculo.us's Ajax.InPlaceEditor is an object that makes it very easy to specify any text on a web page as editable; it uses Ajax requests to handle any changed values. This hack's web page displays a quote from the old patriot Thomas Paine, but it allows the devilish user to edit the word "souls." Using the Ajax.InPlaceEditor object, the server component can look at the new value and decide whether to keep it. The user interacts with a text control; the code handles the server-related activity as Ajax requests in the background.

Figure 8-5 shows what the web application looks like.

Figure 8-5. Alter that quote!

It may be deemed blasphemous, but the user can now edit the word "souls." The application quietly submits the new word using XMLHttpRequest.

Only the quote as displayed in the user's browser is changed, not the backend page (unless this is part of the server-side process).

When the user passes the mouse pointer over the word "souls," this word is highlighted in yellow. If the user clicks on it, it turns into a text control, as Figure 8-6 shows. We have changed the word to "wrists."

Figure 8-6. Rewriting history

When the user clicks the "ok" button, an Ajax request sends the field's value to the server automatically. If the user clicks "cancel," the control vanishes and the code does not send a request. Figure 8-7 shows the final result after entering "wrists" and clicking "ok." Our server component just returns the changed value as is, but obviously it could do a lot more (for example, check for and reject offensive terms).

Figure 8-7. Trying times for typists

Now let's look at the rather pithy web page code and JavaScript. Here is the view that the web page loads. I made sure to include the prototype.js and scriptaculous.js files in script tags:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"         "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head>     <meta http-equiv="content-type" content="text/html; charset=utf-8" />     <script src="/books/4/254/1/html/2//javascripts/prototype.js" type="text/javascript"></script>     <script src="/books/4/254/1/html/2//javascripts/scriptaculous.js" type="text/javascript"></script>     <script src="/books/4/254/1/html/2//javascripts/auto_inp.js" type="text/javascript"></script>     <style type="text/css">         @import "http://localhost:8000/stylesheets/hacks.css";     </style>     <title>In-Place Editor field</title> </head> <body> <h3 >Editable Quote</h3>     <pre >         &#8220;These are the times that try men's         <span >souls</span>. The summer soldier         and the sunshine patriot may,         in this crisis, shrink from the service of his country;         but he that stands it now deserves         the love and thanks of man and woman.&#8221;     </pre> <p  >     --Thomas Paine </p> </body> </html>

Our code initially encountered a JavaScript error that necessitated upgrading from scriptaculous.js Version 1.5_rc5 to 1.5.0. This solved the problem. scriptaculous.js v1.5.0 requires Prototype v1.4 or greater.

The code surrounds the editable text with a span tag and gives the tag an id. Here's the code from the imported auto_inp.js file, which creates the Ajax.InPlaceEditor object:

window.onload=function(  ){     var inp = new Ajax.InPlaceEditor("ed", "/hacks/in_place",               {formId: "value"}); }

This code specifies the id of the editable element (ed), the relative URL for the server component where the Ajax request will be sent, and a formId option specifying the name of the variable containing the editing result. In other words, the querystring for the Ajax request when the user clicks "ok" could be value=wrists.

There are many other options that the code can use. See the API description at http://wiki.script.aculo.us/scriptaculous/show/Ajax.InPlaceEditor.

In addition, when the user clicks "ok" to change the edited value, by default the word "saving..." appears temporarily in the editable space during the server interaction. You can style the appearance of this word by including the following class name in your CSS file:

.inplaceeditor-saving{font-family: Times,Verdana;font-size: 0.8em; color: black; }

The .inplaceeditor-saving CSS class is the default name for the class that script.aculo.us will use to style the saving-related word. You can use a different word by including this option in the constructor (here, it's been replaced it with "waiting"):

var inp = new Ajax.InPlaceEditor("ed", "/hacks/in_place",           {formId: "value", savingText: "waiting"});