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.
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 > “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.” </pre> <p > --Thomas Paine </p> </body> </html>
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.
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"}); |
Категории