Some Bits in Few Pieces
In Place Text Editing
With the advent of Ajax we have seen use of quite a few editing of text in-place. This in-place thing is leveraged to a great extent by Flickr (http://www.flickr.com/).

I give an example of how we can do the same thing with little of coding. It just requires a few CSS Style attributes used along with Javascript.
This in place is a Client only without any server postback with Ajax. For including the Ajax functionality, we can jus make an extra function call to send the edited text to the server, in the onclick event of the Save button.
Here is the example:


Here is the code that makes this live:

<div id="inplace">
<input type="text" value="In place edit"
oldvalue="" id="inplacetext"
style="border: none;
font-family: Tahoma; font-size: 10pt;
font-weight: bold;
background-color: #FAFAFA;
color: #336699;"
onmouseover="this.style.backgroundColor='#EEEEEE';" onmouseout="this.style.backgroundColor='#FAFAFA';"
onfocus="document.getElementById('ipbuttons').style.display='block'; this.oldvalue=this.value; this.style.border='solid #333333 1px';" />

<div id="ipbuttons" style="display: none; margin-top: 10px;">
<input type="button" value="Save"
onclick="
document.getElementById('inplacetext').oldvalue=document.getElementById('inplacetext').value;
document.getElementById('inplacetext').blur();
document.getElementById('inplacetext').style.border='none';
document.getElementById('ipbuttons').style.display='none';" />

<input type="button" value="Cancel"
onclick="
document.getElementById('inplacetext').value=document.getElementById('inplacetext').oldvalue;
document.getElementById('inplacetext').blur();
document.getElementById('inplacetext').style.border='none';
document.getElementById('ipbuttons').style.display='none';" />

</div>
</div>

Have Fun :)