SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2007
    Posts
    92
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy problem during cancel the text editing

    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.

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    I'm not sure about the first problem and suspect that it may be a browser issue, but for the second problem the typical way is to show the "Please enter ..." message in light grey in the box, which clears when you click on it.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •