Start Free Trial

asked on

AJAX Problem

Hello,

I have a page that renders records to the page from a database.
first name, last name, age, comment

I want to be able to use ajax to edit and update the comment of any of the records on the page if the edit button is clicked.

I'm having a little problem, here is the code I have so far.
Here's the error I get:
"document.getElementById("cm_id") has no properties"

Also, I'm using post and I'm not sure if I'm doing it right.

Thanks.

<html>
 
 <head>
  <title></title>
  <script language="javascript">
var xmlHttp
 
function editComment(id)
{ 
    xmlHttp=GetXmlHttpObject() //See if it works with users browser.
    
    if (xmlHttp==null)
     {
         alert ("Browser does not support HTTP Request")
         return
     }
        var url="cmtProcess.asp"
        url=url+"?cm_id"+id+"="+document.getElementById("cm_id").value
        xmlHttp.onreadystatechange=stateChanged //calls the stateChanged() function
        xmlHttp.open("POST",url,true)
        xmlHttp.send(null)
}
 
 
function stateChanged() 
{ 
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
 { 
 document.getElementById("showCmt").innerHTML=xmlHttp.responseText 
 } 
}
 
 
function GetXmlHttpObject()
{
var xmlHttp=null;
try
  {
  // Firefox, Opera 8.0+, Safari
  xmlHttp=new XMLHttpRequest();
  }
catch (e)
  {
  // Internet Explorer
  try
    {
    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
    }
  catch (e)
    {
    try
      {
      xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    catch (e)
      {
      alert("Your browser does not support AJAX!");
      return false;
      }
    }
  }
 
  return xmlHttp;
}
 
 
</script>
 
 </head>
 
 <body>
  
  <table width="60%" border=1>
   <tr>
    <td>First Name</td>
    <td>Last Name</td>
    <td>Age</td>
    <td>Comment</td>
    <td>Modify</td>
   </tr>
<%
 Set conn = Server.CreateObject("ADODB.Connection")
 conn.Open "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & Server.Mappath("comment.mdb") & ";"
 
 txt = "SELECT * FROM tblAjax"
 
 Set rs = Server.CreateObject("ADODB.Recordset")
 rs.Open txt, conn
 
 do while not rs.eof
%>   
<form>
   <tr>
    <td><%=rs("fname")%></td>
    <td><%=rs("lname")%></td>
    <td><%=rs("age")%></td>
    <td><%=rs("comment")%><span id="showCmt"><textarea cols="50" rows="5"><%=rs("comment")%></textarea></span></td>
    <td><input type="button" value="Edit" onclick="editComment('<%=rs("id") %>')" name="edit" /><input type="hidden" id="cm_id<%=rs("id") %>" name="cm_id" value="<%=rs("id") %>" /></td>
   </tr>   
</form>
<%
    rs.MoveNext
    Loop
%>  
  </table>  
 </body>
 
</html>
 
------------------------
cmtProcess.asp
------------------------
<%
cm_id = Request("cm_id")
cmt = request("cmt")
 
 Set conn = Server.CreateObject("ADODB.Connection")
 conn.Open "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & Server.Mappath("comment.mdb") & ";"
 
txt="UPDATE tblAjax set comment =" & cmt & " where id ="&cm_id
 
conn.execute(txt)
%>

Open in new window

getElementById() requires that you have an existing id on your document. If you look close at your markup, your hidden field is:
<input type="hidden" id="cm_id<%=rs("id") %>" name="cm_id"...

You are supplying the value of the name attribute, but getElementById will work only with the value of the id attribute. So, if the rs("id") were 3, then the html would be:
<input type="hidden" id="cm_id3" name="cm_id"...

and what you would need to use is:
document.getElementById("cm_id3")

Also, if you look even closer, on that hidden field, you are setting the value to rs("id") and then trying to use the getElementById to extract that id. You do not need to do so since you already have the id due to this:
onclick="editComment('<%=rs("id") %>')"

In other words, what you are trying to do here:
url=url+"?cm_id"+id+"="+document.getElementById("cm_id").value

should be written as:
url=url+"?cm_id"+id+"="+document.getElementById("cm_id"+id).value

but ultimately, that is the same as:
url=url+"?cm_id"+id+"="+id;

no need for document.getElementById()

ASKER

Isn't this part
"xmlHttp.send(null)" supposed to be different since I have this " xmlHttp.open("POST",url,true)

I'm using a post and not a get.

You need to pass the argument in send() not in the querystring. Also, since your textarea is within <span id="showCmt">, when this is executed:
document.getElementById("showCmt").innerHTML=xmlHttp.responseText

the textarea will be gone permanently. If you do NOT want that, then put the </span> adajacent to <span id="showCmt"> like I did below.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
 "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
 <head>
  <title></title>
  <script language="javascript">
//initialize your variable
var xmlHttp=null;
 
function editComment(id)
{ 
    xmlHttp=GetXmlHttpObject() //See if it works with users browser.
    
    if (xmlHttp==null)
     {
         alert ("Browser does not support HTTP Request")
         return false;
     }
        var url="cmtProcess.asp"
        xmlHttp.onreadystatechange=stateChanged //calls the stateChanged() function
        xmlHttp.open("POST",url,true)
        xmlHttp.send("cm_id"+id+"="+id)
}
 
 
function stateChanged() 
{ 
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
 { 
 document.getElementById("showCmt").innerHTML=xmlHttp.responseText 
 } 
}
 
 
function GetXmlHttpObject()
{
var xmlHttp=null;
try
  {
  // Firefox, Opera 8.0+, Safari
  xmlHttp=new XMLHttpRequest();
  }
catch (e)
  {
  // Internet Explorer
  try
    {
    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
    }
  catch (e)
    {
    try
      {
      xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    catch (e)
      {
      alert("Your browser does not support AJAX!");
      return false;
      }
    }
  }
 
  return xmlHttp;
}
 
 
</script>
 
 </head>
 
 <body>
  
  <table width="60%" border=1>
   <tr>
    <td>First Name</td>
    <td>Last Name</td>
    <td>Age</td>
    <td>Comment</td>
    <td>Modify</td>
   </tr>
<%
 Set conn = Server.CreateObject("ADODB.Connection")
 conn.Open "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & Server.Mappath("comment.mdb") & ";"
 
 txt = "SELECT * FROM tblAjax"
 
 Set rs = Server.CreateObject("ADODB.Recordset")
 rs.Open txt, conn
 
 do while not rs.eof
%>   
<form>
   <tr>
    <td><%=rs("fname")%></td>
    <td><%=rs("lname")%></td>
    <td><%=rs("age")%></td>
    <td><%=rs("comment")%><span id="showCmt"></span><textarea cols="50" rows="5"><%=rs("comment")%></textarea></td>
    <td><input type="button" value="Edit" onclick="editComment('<%=rs("id") %>')" name="edit" /></td>
   </tr>   
</form>
<%
    rs.MoveNext
    Loop
%>  
  </table>  
 </body>
 
</html>

Open in new window

ASKER

<input type="button" value="Edit" onclick=id")"editComment('<%=rs(" %>')" name="edit" />

What does the bottom do? onclick looks unusual

onclick=id")"editComment('<%=rs(" %>')"

especially "onclick=id")"

Should be something like:

    <td><input type="button" value="Edit" onclick="editComment('<%=rs("id")%>')" name="edit" /></td>

Open in new window

Doggone it, I mean:

    <td><input type="button" value="Edit" onclick="editComment('<%=rs(">')" name="edit" /></td>

Open in new window

Sheesh - I'm not smoking crack, honest ;-)

<td><input type="button" value="Edit" onclick="editComment('<%=rs("id").value%>')" name="edit" /></td>

Open in new window

ASKER

I really appreciate all the help so far but it's not really working the way I want.

What I am trying to do is that when the user clicks "edit", the Textarea box should appear with the comment in the database inside of it. The "edit" button should then change to an "Update" button and after the user edits the contents of the Textarea they will be able to update the database with their changes by clicking "Update". Then the Textarea box will dissapear and only the new changes will appear in the cell as static data.

I hope that makes sense.

I did not get to far b/c I got stuck on the "edit" portion.

Any help and explanation would be great b/c I have to get it in Monday morning.

>>What does the bottom do? onclick looks unusual...onclick=id")"...
Where did that come from? Look at the post right before that. I posted the correct syntax for the button there.

ASKER

Hey Hielo,

I was not questioning where it was right or wrong? I just wanted to understand it.
Sorry if that was offensive in anyway.

Anyway, with the code you posted in the code snippet, here's the error I get

Error Type:
Microsoft JET Database Engine (0x80040E14)
Syntax error (missing operator) in query expression 'id ='.
/ajaxComment/cmtProcess.asp, line 12

I'm not sure if it's picking up the id from the previous page with the ajax.

What do you think?

>>Sorry if that was offensive in anyway.
No, I did not take offense to anything. I was trying to figure out where that code come from

>> line 12
What does YOUR line 12 look like? That is a server error and line twelve of what I posted last has no server code.

>>I'm not sure if it's picking up the id from the previous page with the ajax.
On the ajax page change this:
xmlHttp.send("cm_id"+id+"="+id)

to this:
xmlHttp.send("cm_id="+id);

then in cmtProcess.asp you will need to retrieve the id as follows:
Request("cm_id")

ASKER

Here's my line 12
txt="UPDATE tblAjax set comment ='" & cmt & "' where id ="&cm_id

Also, if this helps here's the link to the Ajax page
http://www.iwebarea.net/ajax/ajxPage.asp

I really want it to mimick this page
http://www.iwebarea.net/ajax/ajxPage_is.asp (though, I'm having javascript problems here too)

ASKER

Here's the code I have so far:

------------------
ajxPage.asp
------------------
<html>
 
 <head>
  <title></title>
  <script language="javascript">
//initialize your variable
var xmlHttp=null;
 
function editComment(id)
{ 
    xmlHttp=GetXmlHttpObject() //See if it works with users browser.
    
    if (xmlHttp==null)
     {
         alert ("Browser does not support HTTP Request")
         return false;
     }
        var url="cmtProcess.asp";
        xmlHttp.onreadystatechange=stateChanged; //calls the stateChanged() function
        xmlHttp.open("POST",url,true);
        //xmlHttp.setRequestHeader("Content-Type", "application/X-www-form-urlencoded");
        xmlHttp.send("cm_id="+id);
 
}
 
 
function stateChanged() 
{ 
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
 { 
 document.getElementById("showCmt").innerHTML=xmlHttp.responseText 
 } 
}
 
 
function GetXmlHttpObject()
{
var xmlHttp=null;
try
  {
  // Firefox, Opera 8.0+, Safari
  xmlHttp=new XMLHttpRequest();
  }
catch (e)
  {
  // Internet Explorer
  try
    {
    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
    }
  catch (e)
    {
    try
      {
      xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    catch (e)
      {
      alert("Your browser does not support AJAX!");
      return false;
      }
    }
  }
 
  return xmlHttp;
}
 
 
</script>
 
 </head>
 
 <body>
  
  <table width="60%" border=1>
   <tr>
    <td>First Name</td>
    <td>Last Name</td>
    <td>Age</td>
    <td>Comment</td>
    <td>Modify</td>
   </tr>
<%
 Set conn = Server.CreateObject("ADODB.Connection")
 conn.Open "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & Server.Mappath("comment.mdb") & ";"
 
 txt = "SELECT * FROM tblAjax"
 
 Set rs = Server.CreateObject("ADODB.Recordset")
 rs.Open txt, conn
 
 do while not rs.eof
%>   
<form>
   <tr>
    <td><%=rs("fname")%></td>
    <td><%=rs("lname")%></td>
    <td><%=rs("age")%></td>
    <td><%=rs("comment")%><span id="showCmt"></span><textarea cols="50" rows="5"><%=rs("comment")%></textarea></td>
    <td><input type="button" value="Edit" onclick="editComment('<%=rs("id") %>')"  name="edit" /></td>
 
 
</td>
   </tr>   
</form>
<%
    rs.MoveNext
    Loop
%>  
  </table>  
 </body>
 
</html> 
 
-------------------------
cmtProcess.asp
-------------------------
<%
cm_id = Request("id")
response.Write cm_id
 
cmt = request.form("cmt")
 
 Set conn = Server.CreateObject("ADODB.Connection")
 conn.Open "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & Server.Mappath("comment.mdb") & ";"
 
txt="UPDATE tblAjax set comment ='" & cmt & "' where id ="&cm_id
 
conn.execute(txt)
%>

Open in new window

>>(though, I'm having javascript problems here too)
The problem on that page is that you have
<form name="myForm">
for every record. When this is executed:
document.myForm.submit();

the browser doesn't know which document.myForm you are referring to, since you have lots of them! To fix that give your <form> elements a unique id:
<form id="myForm<%rs=("id")%>">

and when you call it, pass the id:
<input type="button" name="modify" onclick="JavaScript: submitform('<%=rs("id")%>');" value="Update" />

and finally, your javascript will be:
function submitform(id)
{
document.getElementById("myForm"+id).submit();
}

Your ajax page is sending:
xmlHttp.send("cm_id="+id);

so the name of the field is cm_id. Thus, this is wrong:
cm_id = Request("id")

I clearly pointed out above that it should be Request("cm_id"):
cm_id = Request("cm_id")

Also, your ajax request is NOT sending any comment, so this:
cmt = request.form("cmt")

will not give you the updated information. Let's try the following:

------------------
Hielo_ajxPage.asp
------------------
<html>
 
 <head>
  <title></title>
  <script language="javascript">
//initialize your variable
var xmlHttp=null;
 
function editComment(id)
{ 
    xmlHttp=GetXmlHttpObject() //See if it works with users browser.
    
    if (xmlHttp==null)
     {
         alert ("Browser does not support HTTP Request")
         return false;
     }
        var url="Hielo_cmtProcess.asp";
        xmlHttp.onreadystatechange=stateChanged; //calls the stateChanged() function
        xmlHttp.open("POST",url,true);
        //xmlHttp.setRequestHeader("Content-Type", "application/X-www-form-urlencoded");
        xmlHttp.send( "cm_id="+id+"&cmt=" + escape( document.getElementById("cmt"+id).value ) );
 
}
 
 
function stateChanged() 
{ 
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
 { 
 document.getElementById("showCmt").innerHTML=xmlHttp.responseText 
 } 
}
 
 
function GetXmlHttpObject()
{
var xmlHttp=null;
try
  {
  // Firefox, Opera 8.0+, Safari
  xmlHttp=new XMLHttpRequest();
  }
catch (e)
  {
  // Internet Explorer
  try
    {
    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
    }
  catch (e)
    {
    try
      {
      xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    catch (e)
      {
      alert("Your browser does not support AJAX!");
      return false;
      }
    }
  }
 
  return xmlHttp;
}
 
 
</script>
 
 </head>
 
 <body>
  
  <table width="60%" border=1>
   <tr>
    <td>First Name</td>
    <td>Last Name</td>
    <td>Age</td>
    <td>Comment</td>
    <td>Modify</td>
   </tr>
<%
 Set conn = Server.CreateObject("ADODB.Connection")
 conn.Open "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & Server.Mappath("comment.mdb") & ";"
 
 txt = "SELECT * FROM tblAjax"
 
 Set rs = Server.CreateObject("ADODB.Recordset")
 rs.Open txt, conn
 
 do while not rs.eof
%>   
<form>
   <tr>
    <td><%=rs("fname")%></td>
    <td><%=rs("lname")%></td>
    <td><%=rs("age")%></td>
    <td><%=rs("comment")%><span id="showCmt"></span><textarea id="cmt<%=rs("id")%>" cols="50" rows="5"><%=rs("comment")%></textarea></td>
    <td><input type="button" value="Edit" onclick="editComment('<%=rs("id")%>')"  name="edit" /></td>
 
 
</td>
   </tr>   
</form>
<%
    rs.MoveNext
    Loop
%>  
  </table>  
 </body>
 
</html> 
 
-------------------------
Hielo_cmtProcess.asp
-------------------------
<%
cm_id = Request("id")
 
cmt = Replace(Trim(Request("cmt")),"'","''")
 
 Set conn = Server.CreateObject("ADODB.Connection")
 conn.Open "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & Server.Mappath("comment.mdb") & ";"
 
txt="UPDATE tblAjax set comment ='" & cmt & "' where id =" & cm_id
 
conn.execute(txt)
Response.Write( Trim(Request("cmt")) )
%>

Open in new window

ASKER

Hey Hielo,

I did not know you posted a solution to my Javascript problem here or I would not have posted another question.

Anyway, I copied and pasted as you have up top but I still get the same error.
http://www.iwebarea.net/ajax/ajxPage.asp

try changing the update statement to:
txt="UPDATE [tblAjax] SET [comment] ='" & cmt & "' WHERE [id]='" & cm_id & "';"

(Copy and paste from here). If the problem persists, try getting rid of the ending semicolon.

ASKER

It did not work. I tried it with and without the single quotes around the cm_id.

Here's the error:
Syntax error (missing operator) in query expression '[id]='.

I forgot to update your first line. It should be:
cm_id = Request("cm_id")

Also, on your ajax page, provide the Content-Type and Content-Length. Use this:

function editComment(id)
{ 
    xmlHttp=GetXmlHttpObject() //See if it works with users browser.
    
    if (xmlHttp==null)
     {
         alert ("Browser does not support HTTP Request")
         return false;
     }
        var url="cmtProcess.asp";
        xmlHttp.onreadystatechange=stateChanged; //calls the stateChanged() function
        var data = "cm_id="+id+"&cmt=" + escape( document.getElementById("cmt"+id).value )
			   xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
			   xmlHttp.setRequestHeader("Content-length", data.length);
        xmlHttp.open("POST",url,true);
        xmlHttp.send( data );
}

Open in new window

ASKER

This is the error I get now.
uncaught exception: [Exception... "Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsIXMLHttpRequest.setRequestHeader]" nsresult: "0x80004005 (NS_ERROR_FAILURE)" location: "JS frame :: http://www.iwebarea.net/ajax/ajxPage.asp :: editComment :: line 21" data: no]

>>xmlHttp.setRequestHeader("Content-length", data.length);

I have *never* set this attribute in *any* of my Ajax >POST< methods - are you certain it is necessary?

Look at your database. Look at the comment for:
Isaac Sogunro 34
:)

You need the + operator to concatenate string:

var data = "cm_id="+id+"&cmt=" + escape( document.getElementById("cmt"+id).value );

ASKER

Thanks a lot hielo.

The errors are gone but it's not doing anything.
What do I need to do to get it like this page?
http://www.iwebarea.net/ajax/ajxPage_is.asp

Here's the code to that page

<html>
 
 <head>
  <title>NOT AJAX</title>
  <script type="text/javascript">
function submitform(formObj) {
  formObj.submit();
}
</SCRIPT>
 
 <%
    id = Request.QueryString("id")
    if isNumeric(id) then
        response.Write "yep"
    end if
    modify = Request.QueryString("modify")
 %>
 </head>
 
 <body>
  
  <table width="60%" border=1>
   <tr>
    <td>First Name</td>
    <td>Last Name</td>
    <td>Age</td>
    <td>Comment</td>
    <td>Modify</td>
   </tr>
<%
 Set conn = Server.CreateObject("ADODB.Connection")
 conn.Open "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & Server.Mappath("comment.mdb") & ";"
 
 txt = "SELECT * FROM tblAjax"
 
 Set rs = Server.CreateObject("ADODB.Recordset")
 rs.Open txt, conn
 
 do while not rs.eof
%>   
<form name="myForm<%=rs("id") %>" method="post" action="cmtProcess_is.asp">
   <tr>
    <td><%=rs("fname")%></td>
    <td><%=rs("lname")%></td>
    <td><%=rs("age")%></td>
    <td><a name="comm<%=rs("id")%>"></a> <%If (cint(rs("id")) = cint(id)) and (modify = "Edit") then %>
            <textarea cols="50" rows="5" name="cmt"><%=rs("comment")%></textarea>
        <% Else 
            response.Write rs("comment")
           End If
        %>
    </td>
    <td align="center">
        <% If (cint(rs("id")) = cint(id)) and (modify = "Edit") Then %>
            <input type="Submit" name="modify" value="Update" /><input type="hidden" name="id" value="<%=rs("id") %>" />
        <% Else %>
            <a href="ajxPage_is.asp?id=<%=rs("id") %>&modify=Edit#comm<%=rs("id")%>" style="font-family:Verdana;font-size:10pt">edit</a>   
        <% End If %>
 
</td>
   </tr>  
</form>
<%
    rs.MoveNext
    Loop
%>  
  </table>  
 </body> 
</html>

Open in new window

Use this javascript:

  <script language="javascript">
//initialize your variable
var xmlHttp=null;
 
 
 function editComment(id) 
{ 
	xmlHttp=GetXmlHttpObject(); //See if it works with users browser. 
	if (xmlHttp==null) 
	{ 
		alert ("Browser does not support HTTP Request"); 
		return false; 
	} 
  xmlHttp.onreadystatechange=function(){stateChanged(id);}
	var url="cmtProcess.asp"; 
	var data = "cm_id="+id+"&cmt="+encodeURIComponent( document.getElementById("cmt"+id).value ); 
	xmlHttp.open("POST",url,true); 
	xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 
	xmlHttp.setRequestHeader("Content-length", data.length); 
  xmlHttp.send( data ); 
}
 
 
 
function stateChanged(id) 
{ 
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
 { 
 document.getElementById("showCmt"+id).innerHTML=xmlHttp.responseText 
 hideEdit(id);
 } 
}
 
 
function GetXmlHttpObject()
{
var xmlHttp=null;
try
  {
  // Firefox, Opera 8.0+, Safari
  xmlHttp=new XMLHttpRequest();
  }
catch (e)
  {
  // Internet Explorer
  try
    {
    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
    }
  catch (e)
    {
    try
      {
      xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    catch (e)
      {
      alert("Your browser does not support AJAX!");
      return false;
      }
    }
  }
 
  return xmlHttp;
}
 
 function show(id)
 {
 	document.getElementById(id).style.display="";
 }
 function hide(id)
 {
 	document.getElementById(id).style.display="none";
 }
 
 function showEdit(id)
 {
		show('cmt'+id);
    show('Update'+id);
    hide('Edit'+id);
    hide('showCmt'+id);
 }
 function hideEdit(id)
 {
		hide('cmt'+id);
    hide('Update'+id);
    show('Edit'+id);
    show('showCmt'+id);
 }
</script>

Open in new window

Then update your do while to this:

do while not rs.eof
%>   
<form>
   <tr>
    <td><%=rs("fname")%></td>
    <td><%=rs("lname")%></td>
    <td><%=rs("age")%></td>
    <td><%=rs("comment")%><span id="showCmt<%=rs("id")%>"></span><textarea style="display:none" id="cmt<%=rs("id")%>" cols="50" rows="5"><%=rs("comment")%></textarea></td>
    <td><input type="button" value="Edit" onclick="editComment('<%=rs("id")%>')"  name="edit" /><input type="button" value="Update" id="Update<%=rs("id")%>" style="display:none;" onclick="editComment('<%=rs("id")%>')"  name="edit" /></td>
 
 
</td>
   </tr>   
</form>
<%
    rs.MoveNext
    Loop
%>

Open in new window

ASKER

Look at what its doing
http://www.iwebarea.net/ajax/ajxPage.asp

Ahh, the edit button should be:
<input type="button" value="Edit" onclick="showEdit('<%=rs("id")%>')" name="edit" />

ASKER

It works but it's kind of quirky. You can see for yourself.
When I update, I get duplicates.
Also, when I click on Edit, the static data is still there.

I tried put the hideEdit() in a <span> around the data but that did not work.

Still not quite there. Update your do while with this:

 do while not rs.eof
%>   
<form>
   <tr>
    <td><%=rs("fname")%></td>
    <td><%=rs("lname")%></td>
    <td><%=rs("age")%></td>
    <td><span id="showCmt<%=rs("id")%>"><%=rs("comment")%></span><textarea style="display:none" id="cmt<%=rs("id")%>" cols="50" rows="5"><%=rs("comment")%></textarea></td>
    <td><input type="button" value="Edit" onclick="showEdit('<%=rs("id")%>')"  name="edit" /><input type="button" value="Update" id="Update<%=rs("id")%>" style="display:none;" onclick="editComment('<%=rs("id")%>')"  name="edit" /></td>
 
 
</td>
   </tr>   
</form>
<%
    rs.MoveNext
    Loop
%>

Open in new window

ASKER CERTIFIED SOLUTION

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ASKER

Thanks a lot for your patience and help.
I really appreciate it.