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?
how can I display Message like "Please Edit ur name here" on the empty editable place when i mouseover that editable place?

my reference:
below tis is the JS i have used.
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

<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.