In-place Editing using PHP and Script.aculo.us

Exclusive offer: get 50% off this eBook here
PHP and script.aculo.us Web 2.0 Application Interfaces

PHP and script.aculo.us Web 2.0 Application Interfaces — Save 50%

Build powerful interactive AJAX applications with script.aculo.us and PHP

$20.99    $10.50
by Sridhar Rao | April 2009 | AJAX MySQL PHP Web Development

In this article by Sridhar Rao, we will learn about editing the content in the page without moving, dragging, or dropping it. This feature is called in-place editing. The key topics that we are going to explore in this article are:

  • Introduction to in-place editing
  • In-place editing: Definition and attributes
  • Code usage in examples
  • Tips and tricks involving in-place editing
  • Hands-on example: Handling at the server-side
  • Hands-on with InPlaceCollectionEditor

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.

In-place Editing using PHP and Script.aculo.us

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

In-place Editing using PHP and Script.aculo.us

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='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="src/prototype.js"></script>
<script type="text/javascript" src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="src/scriptaculous.js"></script>
<script type="text/javascript" src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="src/effects.js"></script>
<script type="text/javascript" src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="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:

In-place Editing using PHP and Script.aculo.us

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:

    In-place Editing using PHP and Script.aculo.us

  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'
    }
    );
PHP and script.aculo.us Web 2.0 Application Interfaces Build powerful interactive AJAX applications with script.aculo.us and PHP
Published: May 2009
eBook Price: $20.99
Book Price: $34.99
See more
Select your format and quantity:

Tips and tricks with in-place editing

Now that we have learned how to use in-place editing, we can take a look at some cheat codes. Here are some tips and tricks to get you on a fast track with using in-place editing.

Disabling the element for the in-place editing functionality

We may need to disable the in-place editing functionality of an element after a certain action in the application. In the real world (say a project management application), where to-do lists are shared, we can disable the functionality of certain items based on the user access roles. This is just a teaser; you can think of more. For now, let's quickly learn the art of disabling.

The functionality can be disabled on the fly.

Element.dispose();

Now, let's try this with the myDIV element created above. To disable it, add this line of code:

myDiv.dispose();

Disabling the editing functionality certainly comes in handy and can be called after a particular event, or as a callback.

Entering into the edit mode

Now that we have disabled the element, chances are that we may also need to bring back the sanity and make the element editable. Again, making an element editable is as simple as disabling it.

The element can be made editable with a brute force method.

Element.enterEnterMode();

We need to invoke the element ID with the enterEnterMode() function. To make the myDiv element editable, we need to add this line of code:

myDiv.enterEnterMode();

We can make certain functionality on an application editable only to the administrator, and not to the general users. We can disable in-place editing for general users and allow the admin to do in-place editing.

Submitting on Blur

There may be a lot of places where we don't want to show the user okButton or cancelLink along with our text box or field.

The following code shows the constructor definition for submitting the data on Blur.

new Ajax.InPlaceEditor(
'theElement',
'Server-Side Script',
{
okButton: false,
cancelLink:false,
submitOnBlur :true,
ajaxOptions: {method: 'post'}
}
);

The resulting user interface is shown in the following screenshot:

In-place Editing using PHP and Script.aculo.us

A simple example is the Gtalk status message. We can add our own title and the messenger updates it at runtime, without showing the user the Submit and Cancel buttons.

There are lots of uses of this particular option. It's not a good practice to present the user with the Submit and Cancel buttons every time, mainly, from the user interface perspective. So the next time you plan to show the user a Submit button, think about the submitOnBlur option.

Callbacks for onEnterEditMode and onLeaveEditMode

We can customize callbacks based on the behavior of the user while using applications. We can create callbacks when a particular element is made editable, or when a particular element leaves the edit mode.

These callbacks can be very useful and powerful in keeping the user informed, and also while changing the behavior of the application based on user inputs.

Invoking the callbacks is pretty neat and simple. Don't believe it? Check this code.

onEnterEditMode:f1(),
onLeaveEditMode: f2();

These options will come with the callback functions in the constructor definition. The complete code snippet will look like this:

new Ajax.InPlaceEditor(id, url, {
callback: function(form, value) { return value},
onEnterEditMode: f1(form, value),
onLeaveEditMode: f2(form, value)
});

In the code snippet, the f1() and f2()functions will be invoked once the element becomes editable and when it leaves the edit mode, respectively.

Hands-on example: In-place editing with server-side handling

In the previous section, we saw different uses for the client-side options. In this section we will be working with the server-side processing.

Most of our web applications are database-driven. When the user edits and submits the data, we need to update the database with the new content. Server-side handling comes into the picture here.

Let's go straight into making an in-place editing module. We are not going to write the module from scratch, but we will be extending the above example. In the story so far, we have added a simple <div> element to the page, initiated the InPlaceEditor constructor, and added a few options to it. We have clubbed together the above pieces of code and the complete code is given here:

<html>
<head>
<title>In-Place Editing Example</title>
<script type="text/javascript" src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="src/lib/prototype.js"></script>
<script type="text/javascript"
src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="src/src/scriptaculous.js"></script>
<script type="text/javascript" src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="src/src/effects.js"></script>
<script type="text/javascript" src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="src/src/controls.js"></script>
<style>
Body
{
color:black;
}
#myDiv
{
background-color:#BCE6D6;
width:400px;
height:30px;
text-align:center;
}
</style>
<script>
window.onload = function() {
new Ajax.InPlaceEditor(
'myDiv',
'URL',
{
okText: 'Update',
cancelText: 'Cancel',
highlightColor:'#E2F1B1',
clickToEditText: 'Click me to edit',
loadingText: 'Loading..',
savingText: 'Saving..'
}
);
}
</script>
<body>
<div id="myDiv">
First move the mouse over me and then click on ME :)
</div>
</body>
</html>

Let's look closely into the constructor definition.

new Ajax.InPlaceEditor(
'myDiv',
'URL',
{
okText: 'Update',
cancelText: 'Cancel',
highlightColor:'#E2F1B1',
clickToEditText: 'Click me to edit',
loadingText: 'Loading..',
savingText: 'Saving..'
}
);

Here, we have given a proxy URL in the option. We now need to create a script at the server side to handle the request sent through this constructor. Let's name it readValue.php.

<?php
$value = $_REQUEST['value'];
echo $value;
?>

That's it! It takes just these two lines to read the value. This is because, by default, it uses REQUEST to send the value. We can also overwrite it by passing our own ajaxOptions. We can also replace $_REQUEST with $_POST and it will still work.

Try it out to believe me. Just replace the URL with readValue.php. The new definition of the constructor now looks like this:

new Ajax.InPlaceEditor(
'myDiv',
'readValue.php',
{
okText: 'Update',
cancelText: 'Cancel',
highlightColor:'#E2F1B1',
clickToEditText: 'Click me to edit',
loadingText: 'Loading..',
savingText: 'Saving..'
}
);

Open the file in a browser. Click on the <div> element and add some new content. It should show you the following result:

In-place Editing using PHP and Script.aculo.us

After we edit the text, check out the resulting output:

In-place Editing using PHP and Script.aculo.us

We were able to read the value at the server-side script. We can do a lot of things with the value such as edit it, add it to a database, or print it back.

Hands-on example: InPlaceCollectionEditor

We have covered the InPlaceEditor up to now. There is one more nice feature we need to learn while we are at in-place editing—InPlaceCollectionEditor.

After clicking on the editable element, the user sees a text box or a text area. In some cases, we need to provide the user with fixed values, which they will have to choose between.

A simple example can be—being asked what your favorite programming language is. Instead of entering any value, you would be prompted with fixed values in a drop-down menu.

Firstly, we have to define the element to initiate the InPlaceCollectionEditor constructor.

new Ajax.InPlaceCollectionEditor(
'myDIV',
'URL',
{
okText: 'Update',
cancelText: 'Cancel',
collection: ['php','mysql','Javascript','C++']
}
);

If you look closely at the code snippet, the syntax is similar to the InPlaceEditorsyntax. The only major difference is the new option—collection. The collection option takes multiple values in the form of an array and prompts them in a drop-down menu for the user. We can use the above server-side code as it is.

Leave this as a part of a hands-on exercise, and try it out! In the following screenshot, check out how it should behave when you convert InPlaceEditor to InPlaceCollectionEditor:

In-place Editing using PHP and Script.aculo.us

After selecting the JavaScript option and clicking on update, we get:

In-place Editing using PHP and Script.aculo.us

In short, InPlaceCollectionEditor is an extension to InPlaceEditor providing the user with a set of fixed, predefined values. These values are shown in the form of a drop-down menu.

Summary

We have almost edited everything on the page using InPlaceEditor and InPlaceCollectionEditor. In this article, we have:

  • Learned about InPlaceEditor
  • Seen the explanation and code usage for InPlaceEditor
  • Learned some tips and tricks with in-place editing
  • Seen hands-on modules for InPlaceEditor at the server-side handling
  • Learned about InPlaceCollectionEditor

 

If you have read this article you may be interested to view :

 

PHP and script.aculo.us Web 2.0 Application Interfaces Build powerful interactive AJAX applications with script.aculo.us and PHP
Published: May 2009
eBook Price: $20.99
Book Price: $34.99
See more
Select your format and quantity:

About the Author :


Sridhar Rao

Sridhar Rao has been learning, working and developing web applications from the time he was introduced to web. The very idea of reaching out to masses and bringing change in the behavior of the users through web applications excites him the most. Most of his work has been in PHP, MySQL and Javascript. He has worked with some of the leading technology and services companies in his IT career.

Sridhar currently works for the world’s leading database and enterprise company. He holds an engineering degree in Information Technology and is based out of Bangalore, India.

Books From Packt

Learning jQuery 1.3
Learning jQuery 1.3

Magento: Beginner's Guide
Magento: Beginner's Guide

Drupal 6 JavaScript and jQuery
Drupal 6 JavaScript and jQuery

Drupal 6 Site Builder Solutions
Drupal 6 Site Builder Solutions

Spring Web Flow 2 Web Development
Spring Web Flow 2 Web Development

WordPress Plugin Development: Beginner's Guide
WordPress Plugin Development: Beginner's Guide

jQuery UI 1.6: The User Interface Library for jQuery
jQuery UI 1.6: The User Interface Library for jQuery

Mastering phpMyAdmin 3.1 for Effective MySQL Management
Mastering phpMyAdmin 3.1 for Effective MySQL Management

 

 

 

 

Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software