[jQuery] Table of information, expanding one row using AJAX call and callback function.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD>
<META http-equiv=Content-Type content="text/html; charset=us-ascii">
<META content="MSHTML 6.00.6000.16414" name=GENERATOR></HEAD>
<BODY>
<DIV><FONT face=Arial size=2>I'm working on project which will have a table of
information. For any row, there could be more "more information" that the user
may want to view. Any row with more information would have some sort of image
indicating this. When the user clicks the row, I'd like to pull data using AJAX,
then expand the row via a callback function.</FONT></DIV>
<DIV> </DIV>
<DIV><FONT face=Arial size=2>Here's how I might do it, does anyone have a better
solution?</FONT></DIV>
<DIV> </DIV>
<DIV><FONT face=Arial size=2><table border="1" width="400"><BR><tr
id="methodname|123456"
class="row"><BR> <td>Name</td><BR> <td>Address</td><BR> <td><img
src="moreinfo.gif" name="image1" /></td><BR></tr><BR><tr
id="row1details" style="display: none;"><BR> <td
colspan="3"><BR> additional details would go here<br
/><BR> additional details would go here<br
/><BR> additional details would go here<br
/><BR> additional details would go here<br
/><BR> additional details would go here<br
/><BR> </td><BR></tr><BR></table></FONT></DIV>
<DIV> </DIV><FONT face=Arial size=2>
<DIV><BR> $(document).ready( function(){</DIV>
<DIV> </DIV>
<DIV> $('.row td img').bind("click", function()
{<BR> $('#row1details').slideDown("slow");<BR> });</DIV>
<DIV> </DIV>
<DIV> });</DIV>
<DIV> </DIV>
<DIV>The first problem with this is that the TR doesn't animate. It merely
shows, even though I'm using slideDown. What am I doing wrong there?</DIV>
<DIV> </DIV>
<DIV>I'm not even sure how to do the AJAX call. For any row which has more
information, I need to pass in two values...a string representing a Coldfusion
method to call, and a number representing the id of the record I want to return
to the page. I think the easiest way to do this would be to stash the methodname
and number (id) as the id of the row, then parse that in the click function. I
think I can figure out that part.</DIV>
<DIV> </DIV>
<DIV>Another question I have is in the above example, when I click the img, I
need to be able to get the ID of it's parent TR. I thought that this would
work:</DIV>
<DIV> </DIV>
<DIV> $('.row td img').bind("click", function()
{<BR> this.parent('tr').attr('id');<BR> });</DIV>
<DIV> </DIV>
<DIV> But it returns an error saying "Object doesn't support this property
or method.". What am I doing wrong?</DIV>
<DIV> </DIV>
<DIV> Please feel free to answer any one of these questions...</FONT></DIV>
<DIV> </DIV>
<DIV align=left><SPAN style="FONT-SIZE: 14px"><B><FONT face="Century Gothic">
<DIV align=left><SPAN class=159130414-05012007><FONT face=Arial size=2><SPAN
class=159130414-05012007><FONT face=Arial
size=2>____________________________________</FONT></SPAN></FONT></SPAN></DIV>
<DIV><SPAN class=159130414-05012007><FONT face=Arial size=2><SPAN
class=159130414-05012007></SPAN></FONT></SPAN> </DIV>Andy
Matthews<BR></FONT></B></SPAN><SPAN style="FONT-SIZE: 11px"><FONT
face="Century Gothic"><SPAN
style="FONT-SIZE: 8.5pt; FONT-FAMILY: 'Century Gothic'; mso-fareast-font-family: 'Times New Roman'; mso-bidi-font-family: 'Times New Roman'; mso-ansi-language: EN-US; mso-fareast-language: EN-US; mso-bidi-language: AR-SA; mso-no-proof: yes">Senior
Coldfusion Developer</SPAN><BR></FONT></SPAN><SPAN style="FONT-SIZE: 11px"><FONT
face="Century Gothic"><FONT color=#808080><IMG alt="" hspace=0
src="cid:059020118@28032007-3085" border=0><BR></FONT>Office: 877.707.5467
x747<BR>Direct: 615.627.9747<BR>Fax:
615.467.6249</FONT></SPAN></DIV>
<DIV><SPAN style="FONT-SIZE: 11px"><FONT
face="Century Gothic">amatthews@dealerskins.com<BR><A
href="http://www.dealerskins.com/">www.dealerskins.com</A></FONT></SPAN></DIV>
<DIV><FONT face=Arial size=2></FONT> </DIV></BODY></HTML>
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/