hello, i have try to implement tis edit in place in my code, and it work fine for me with my asp coding. but i have some problem about cancel the editing.
the problem is:

1.when i click on the text, it will display the editable textbox, let said i put some word inside the textbox but i didnt save it and click on the Cancel Button. and then i click on the Text and edit again, it should display my original data and not the DATA i insert into the textbox without saving just now. how can i solve tis problem?
2.
how can I display Message like "Please Edit ur name here" on the empty editable place when i mouseover that editable place?

My Reference :
http://www.dbachrach.com/blog/wp-con...lickr_edit.php

below tis is the JS i have used.

Code:
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);
}

function handleResponse() {
   if(http.readyState == 4){
   
       if(http.responseText=="firstname") {
        var replaceText = document.getElementById('firstnamevalue').value;
        document.getElementById('firstname_rg_display_section').innerHTML = replaceText;
        document.getElementById('firstname_rg').style.display = '';
        document.getElementById('firstname_hv').style.display = 'none';
       }
       else if(http.responseText=="lastname") {
        var replaceText = document.getElementById('lastnamevalue').value;
        document.getElementById('lastname_rg_display_section').innerHTML = replaceText;
        document.getElementById('lastname_rg').style.display = '';
        document.getElementById('lastname_hv').style.display = 'none';
       }

   }
}


function flashRow(obj) 
{
     obj.bgColor = "#FFFF99";
  obj.title="Click here to edit";
  }
  
  function unFlashRow(obj){
     obj.bgColor = "#FFFFFF";
  }
tis below is my HTML code :

Code:
<tr id="firstname_rg">
                                       <td align="right" height="15px">
                                           <b>First Name : </b>
                                       </td>
                                       <td onmouseover="flashRow(this);" 
                                       onmouseout="unFlashRow(this);" 
                                       onclick="document.getElementById('firstname_hv_editing_section').style.display='';
                                       document.getElementById('firstname_hv_saving_section').style.display='none';
                                       document.getElementById('firstname_rg').style.display='none';
                                       document.getElementById('firstname_hv').style.display='';
                                       ">
                                           <div id="firstname_rg_display_section">
                                               <%if strFirstName ="" OR IsNull(strFirstName) OR IsEmpty(strFirstName) then
                                                   strFirstName="Click here to edit first name"
                                                else
                                                   strFirstName=strFirstName
                                                end if %>
                                               <%=strFirstName %>
                                           </div>
                                           <div id="novalue_display" style="display: none;">
                                               Click here to add the first name</div>
                                       </td>
                                   </tr>
                                   <tr id="firstname_hv">
                                       <td align="right">
                                           <b>First Name : </b>
                                       </td>
                                       <td>
                                           <div id="firstname_hv_editing_section">
                                               <input type="text" class="editMode" size="20" value="<%=strFirstName %>" id="firstnamevalue" />
                                               &nbsp;
                                               <input type="button" value="Save" onclick="document.getElementById('firstname_hv_editing_section').style.display='none';
                                               document.getElementById('firstname_hv_saving_section').style.display='';
                                               var req='updateProfileAjax.asp?part=firstname&id=<%=session("userid") %>&val='+document.getElementById('firstnamevalue').value;
                                               sndReq(req);" />
                                               OR
                                               <input type="button" value="Cancel"  onclick="document.getElementById('firstname_rg').style.display='';
                                               document.getElementById('firstname_hv').style.display='none';" />
                                           </div>
                                           <span id="firstname_hv_saving_section" class="savingAjaxWithBackground">Saving...</span>

                                           <script type="text/javascript">
                                               document.getElementById('firstname_hv').style.display='none';
                                               document.getElementById('firstname_hv_saving_section').style.display='none';
                                           </script>

                                       </td>
                                   </tr>
i hope some one can help me on tis.........looking forward ur kindness..thank you.