On one of my web projects I’ve been working on, we needed to allow the user to edit some information on their profile page. I could have written an HTML form page and then written the php database updater, but why use such outdated interfaces? This is the era of AJAX, and you can’t deny it. AJAX is pretty sweet. I decided on using flickr-like editing boxes to do the job. If you are not familiar with how flickr handles editing data, here’s a short summary.

1. Show user the data field normally (for instance: the title of a picture)
2. When mouse rolls over that title, make the background of the word yellow
3. If the user clicks on the word, change that word to a input box with the word in it. Also show a “save” and “cancel” button
4. A user can rename the picture and then push “save.”
5. Run a little script that updates the name into the database
6. Remove the input box and the buttons and return to the original title display (updated with new title).

Notice how this entire process requires no page refreshes, and after one use becomes completely intuitive.

What I will show you is how to write a little code to emulate this effect almost perfectly.

First, let’s take a look a what the end result will be:

Click here to see it in action.

Roll over any of the fields and notice how the words highlight. You can click them and edit them. Note: database saving is disabled for this demo. Everything will work exactly like it will on your server, but edited values are not written to a database, so after a refresh the default values will reappear.

Click here for the entire html file. I am going to break it apart into pieces below and explain it. Some of the lines in that html file are omitted because they are specific for this example. You will most likely not need them.

<style>
input.editMode {
background-color : #FFFF99;
}
textarea.editMode {
background-color : #FFFF99;
}
.savingAjaxWithBackground {
background-color : #FFFF99;
}
</style>

We set up our style information here. The editMode css style will be our rollover for editable fields. savingAjaxWithBackground is for when we display the words saving while we are updating the value on the server.

<script type=”text/javascript”>
function createRequestObject() {
var ro;
var browser = navigator.appName;
if(browser == “Microsoft Internet Explorer”){
ro = new ActiveXObject(”Microsoft.XMLHTTP”);
}else{
ro = new XMLHttpRequest();
}
return ro;
}

var http = createRequestObject();

function sndReq(action) {
http.open(’get’, action);
http.onreadystatechange = handleResponse;
http.send(null);
}

This is typical AJAX setup code. We create a object for handling the AJAX based on the browser. The sndReq function sends an asynchronous request to a url (’action‘). I am now going to jump down and skip the handleResponse function until later.

function flashRow(obj) {
obj.bgColor = “#FFFF99″; // This is the flash color, typically a light yellow
}

function unFlashRow(obj) {
obj.bgColor = “#F6F6F6″; // This is the original background color
}
</script>

These are the final 2 javascript functions. They are quite simple. We will call these on mouse enters and mouse exits. Next up is some php:

<?php
$editingMyOwn = 1; //Verification code should go here. Set variable to whether user is editing a page they are allowed to.
$firstName = “John”;
$lastName = “Doe”;
$email = “john.doe@gmail.com”;
$phone = “555-555-1234″;
?>

These values will probably be pulled from your cookie, session or database calls. I am setting them explicitly for the sake of simplicity in this example. The next part is the actually html, although it includes some php and javascript. I am just going to show one (the name field) since all the other fields are basically the same. You can see the others in the full html file.

<?php
if($editingMyOwn ==1) { ?>
<tr id=”name_rg”>
<td onMouseOver=”flashRow(this);” onMouseOut=”unFlashRow(this);” onClick=”

document.getElementById(’name_hv_editing_section’).style.display = ”;
document.getElementById(’name_hv_saving_section’).style.display = ‘none’;
document.getElementById(’name_rg’).style.display = ‘none’;
document.getElementById(’name_hv’).style.display = ”;

“>

This code should go inside a <table> tag. Our little bit of php here will check whether we are allowed to edit the value. We then create a table row with an id value. The rg means ‘regular,’ and the hv means ‘hover.’ The hv divs are for the editing. After that, we create a td which will call those javascript functions we already wrote when the mouse enters and exits. The onClick event does 4 main things. It will show the entire editing table row (name_hv), while hiding the normal table row (name_rg). The first two lines of javascript will show the editing part, but not the saving part. This will become clear later in the code.

<div class=”superBigSize” id=”name_rg_display_section”>
<?php echo $firstName . ” ” . $lastName; ?>
</div></td></tr>

This is what a user will see. It just displays the name of the person.

<tr id=”name_hv”><td>
<div id=”name_hv_editing_section”>
<input type=”text” class=”superBigSize editMode” size=”<?php $val=strlen($firstName)+strlen($lastName); echo $val; ?>” value=”<?php echo $firstName . ” ” . $lastName; ?>” id=”person_name” /> <br />
<input type=”button” value=”Save” onClick=”document.getElementById(’name_hv_editing_section’).style.display=’none’;
document.getElementById(’name_hv_saving_section’).style.display=”;
var req = ‘updateProfileAjax.php?part=name&val=’ + document.getElementById(’person_name’).value;sndReq(req);” /> Or <input type=”button” value=”Cancel” onClick=”
document.getElementById(’name_rg’).style.display = ”;
document.getElementById(’name_hv’).style.display = ‘none’;
“/>
</div>

We now create our editing table row. We create a div inside of it that is specifically the editing section. This div contains the input field as well as the two buttons. The php code in here first calculates how large the input box should be, then also puts the first and last name into the input box itself. The onClick code for the Save button does a few things. It first hides the input box and the two buttons. It then shows the words “Saving.” Next, it creates an AJAX call to updateProfileAjax.php. It sends two variables to that php script: part and val. Part tells the php which field we are editing. In this case, it is ‘name.’ Val is the updated value. Finally, we also have a cancel button, which just hides the editing row and shows the normal row.

<span id=”name_hv_saving_section” class=”savingAjaxWithBackground”>
Saving…
</span>
<script type=”text/javascript”>
document.getElementById(’name_hv’).style.display = ‘none’;
document.getElementById(’name_hv_saving_section’).style.display = ‘none’;
</script>
</td></tr>

We finish off the editing table row with the span tag which shows the words saving. We then run a tiny bit of javascript which hides the editing table row.

<?php }
else { ?>
<tr>
<td>
<div class=”superBigSize”><?php echo $firstName . ” ” . $lastName; ?></div>
</td></tr>
<?php } ?>

Last but not least, we need to show a non-editable version for those who don’t have editing rights.

We now have all the code for actually displaying the normal and editing states of a specific field, but what happens when someone actually saves with a new updated value? You will need to code a updateProfileAjax.php file. Here is an example of what one may look like. This file really depends on how your system works. You may want to update a text file or a database or any number of things. Just remember that it takes those two variables we mentioned. You must also do one last thing to this php file. You need it to return a little bit of text. Just have it echo the part variable at the very end. Something like:

<?php echo $_GET['part']; ?>

Should do just fine. Why do we need to do this? Because we need to handle the response (we skipped this javascript function above):

function handleResponse() {
if(http.readyState == 4){
if(http.responseText==”name”) {

var replaceText = document.getElementById(’person_name’).value;
document.getElementById(’name_rg_display_section’).innerHTML = replaceText;
document.getElementById(’name_rg’).style.display = ”;
document.getElementById(’name_hv’).style.display = ‘none’;
}
else if(http.responseText==”email”) {

var replaceText = document.getElementById(’email_value’).value;
document.getElementById(’email_rg_display_section’).innerHTML = “<b>Email:</b> ” + replaceText;
document.getElementById(’email_rg’).style.display = ”;
document.getElementById(’email_hv’).style.display = ‘none’;
}
else if(http.responseText==”phone”) {

var replaceText = document.getElementById(’phone_value’).value;
document.getElementById(’phone_rg_display_section’).innerHTML = “<b>Phone:</b> ” + replaceText;
document.getElementById(’phone_rg’).style.display = ”;
document.getElementById(’phone_hv’).style.display = ‘none’;
}
}
}

The handle response function is very simple. When http.readyState == 4, the AJAX request has finished. We next check whether the request returned the word name, email, or phone. Depending on what it returned, we run basically the same code but on a different html element. We generate the replace text by grabbing what the user typed into the input box. We then edit the innerHTML of the display section with either just that replace text or maybe any supplementary text like you see in the email and phone if-statements. Finally, we show the normal table row and hide the editing table row.

And with that, we now have a completely functional website with flickr-like editing abilities. This truly is the best way to allow editing on your website and will surely benefit your users. You can use all this code, alter/change whatever in any manner you see fit in both personal and commercial projects. You may include a comment referencing here, but that is not required. I hope this was a very informative tutorial and please leave any comments about the code or any suggestions/criticisms. If you liked this, you may also like my tutorial on how to do a cool css style effect like the OS X dashboard for your websites. Thanks for reading.

Featured Info

Nowadays, everyone is having their own web space yet there are many who are still unaware of its benefits e.g. you can sell something at your website, offer certain certifications courses e.g. a+ certification or you can indulge in affiliate business programs like offering mobile phone plans from verizon wireless. It is an easy step and many hosting companies provide this facility of having a web domain name that is associated with the space. These companies also provide featured web hosting services like dedicated servers, unlimited email aliases, ftp access, domain control, regular data backups and sql backup etc,123-reg is a good hosting company in this regard.