An introduction to the in-place editing feature

In-place editing means making the content available for editing just by clicking on it. We hover on the element, allow the user to click on the element, edit the content, and update the new content to our server.

Sounds complex? Not at all! It’s very simple. Check out the example about www.netvibes.com shown in the following screenshot. You will notice that by just clicking on the title, we can edit and update it.

Now, check out the following screenshot to see what happens when we click on the title.

In simple terms, in-place editing is about converting the static content into an editable form without changing the place and updating it using AJAX.

Getting started with in-place editing

Imagine that we can edit the content inside the static HTML tags such as a simple <p> or even a complex <div>.

The basic syntax of initiating the constructor is shown as follows:

New Ajax.InPlaceEditor(element,url,[options]);

The constructor accepts three parameters:

• element: The target static element which we need to make editable
• url: We need to update the new content to the server, so we need a URL to handle the request
• options: Loads of options to fully customize our element as well as the in-place editing feature

We shall look into the details of element and url in the next section. For now, let’s learn about all the options that we will be using in our future examples.

The following set of options is provided by the script.aculo.us library. We can use the following options with the InPlaceEditor object:

• okButton: Using this option we show an OK button that the user clicks on after editing. By default it is set to true.
• okText: With this option we set the text value on the OK button. By default this is set to true.
• cancelLink: This is the button we show when the user wishes to cancel the action. By default it’s set to true.
• cancelText: This is the text we show as a value on the Cancel button. By default it’s set to true.
• savingText: This is the text we show when the content is being saved. By default it’s set to Saving. We can also give it any other name.
• clickToEditText: This is the text string that appears as the control tooltip upon mouse-hover.
• rows: Using this option we specify how many rows to show to the user. By default it is set to 1. But if we pass more than 1 it would appear as a text area, or it will show a text box.
• cols: Using this option we can set the number of columns we need to show to the user.
• highlightColor: With this option we can set the background color of the element.
• highlightendColor: Using this option we can bring in the use of effects. Specify which color should be set when the action ends.
• loadingText: When this option is used, we can keep our users informed about what is happening on the page with text such as Loading or Processing Request.
• loadTextURL: By using this option we can specify the URL at the server side to be contacted in order to load the initial value of the editor when it becomes active.

We also have some callback options to use along with in-place editing.

• onComplete: On any successful completion of a request, this callback option enables us to call functions.
• onFailure: Using this callback option on a request’s failure, we can make a call to functions.
• Callback: This option calls back functions to read values in the text box, or text area, before initiating a save or an update request.

We will be exploring all these options in our hands-on examples.

Code usage of the in-place editing features and options

Now things are simple from here on. Let’s get started with code.

First, let’s include all the required scripts for in-place editing:

<script type="text/javascript" src="src/prototype.js"></script>
<script type="text/javascript" src="src/scriptaculous.js"></script>
<script type="text/javascript" src="src/effects.js"></script>
<script type="text/javascript" src="src/controls.js"></script>

Once this is done, let’s create a basic HTML page with some <p> and <div> elements, and add some content to them.

<body>
<div id="myDiv">
   First move the mouse over me and then click on ME :)
</div>
</body>

In this section we will be learning about the options provided with the in-place editing feature. In the hands-on section we will be working with server-side scripts of handling data.

Now, it’s turn to add some spicy JavaScript code and create the object for InPlaceEditor.

In the following piece of code we have passed the element ID as myDIV, a fake URL,and two options okText and cancelText:

Function makeEditable() {
new Ajax.InPlaceEditor(
      'myDIV',
      'URL',
      {
         okText: 'Update',
         cancelText: 'Cancel',
      }
    );
}

We will be placing them inside a function and we will call them on page load. So the complete script would look like this:

<script>
function makeEditable() {
new Ajax.InPlaceEditor(
      'myDIV',
      'URL',
      {
         okText: 'Update',
         cancelText: 'Cancel'
      }
    );
}
</script>
<body onload="JavaScript:makeEditable();">
<div id="myDiv">
   First move the mouse over me and then click on ME :)
</div>
</body>

Now, save the fi le as Inplace.html. Open it in a browser and you should see the result as shown in the following screenshot:

Now, let’s add all the options step-by-step.

Remember, whatever we are adding now will be inside the definition of the constructor.

1. First let’s add rows and columns to the object.

   new Ajax.InPlaceEditor(
       'myDIV',
       'URL',
        {
         okText: 'Update',
         cancelText: 'Cancel',
         rows: 4,
         cols: 70
        }
   );
   

2. After adding the rows and cols, we should be able to see the result displayed in the following screenshot:

   

3. Now, let’s set the color that will be used to highlight the element.

   new Ajax.InPlaceEditor(
       'myDIV',
       'URL',
       {
         okText: 'Update',
         cancelText: 'Cancel',
         rows: 4,
         cols: 70,
         highlightColor:'#E2F1B1'
       }
   );
   

4. Drag the mouse over the element. Did you notice the change in color? You did? Great!
5. Throughout the book we have insisted on keeping the user informed, so let’s add more options to make this more appealing. We will add clickToEditText, which will be used to inform the user when the mouse hovers on the element.

   new Ajax.InPlaceEditor(
       'myDIV',
       'URL',
       {
         okText: 'Update',
         cancelText: 'Cancel',
         rows: 4,
         cols: 70,
         highlightColor:'#E2F1B1',
         clickToEditText: 'Click me to edit'
       }
   );