PDA

View Full Version : problem during Cancel the text editing in place



giselle2008
06-05-2008, 10:00 AM
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-content/uploads/2007/01/flickr_edit.php

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.