[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 dir=ltr align=left><SPAN class=861311319-28032007><FONT face=Arial
color=#0000ff size=2>Ahhhh</FONT></SPAN></DIV>
<DIV dir=ltr align=left><SPAN class=861311319-28032007><FONT face=Arial
color=#0000ff size=2></FONT></SPAN> </DIV>
<DIV dir=ltr align=left><SPAN class=861311319-28032007><FONT face=Arial
color=#0000ff size=2>$(this),parent()!!!</FONT></SPAN></DIV>
<DIV dir=ltr align=left><SPAN class=861311319-28032007><FONT face=Arial
color=#0000ff size=2></FONT></SPAN> </DIV>
<DIV dir=ltr align=left><SPAN class=861311319-28032007><FONT face=Arial
color=#0000ff size=2>I tried this.parent() and $this.parent() to no
avail.</FONT></SPAN></DIV>
<DIV dir=ltr align=left><SPAN class=861311319-28032007><FONT face=Arial
color=#0000ff size=2></FONT></SPAN> </DIV>
<DIV dir=ltr align=left><SPAN class=861311319-28032007><FONT face=Arial
color=#0000ff size=2>Thanks for your feedback on the TR...I know I can use divs,
but this is tabular data. So maybe I'll just have to use rows of DIVs, each
containing a table.</FONT></SPAN></DIV>
<DIV dir=ltr align=left><SPAN class=861311319-28032007><FONT face=Arial
color=#0000ff size=2></FONT></SPAN> </DIV>
<DIV dir=ltr align=left><SPAN class=861311319-28032007><FONT face=Arial
color=#0000ff size=2></FONT></SPAN> </DIV>
<DIV dir=ltr align=left><SPAN class=861311319-28032007></SPAN> </DIV><BR>
<DIV class=OutlookMessageHeader lang=en-us dir=ltr align=left>
<HR tabIndex=-1>
<FONT face=Tahoma size=2><B>From:</B> discuss-bounces@jquery.com
[mailto:discuss-bounces@jquery.com] <B>On Behalf Of </B>Jake
McGraw<BR><B>Sent:</B> Wednesday, March 28, 2007 1:37 PM<BR><B>To:</B> jQuery
Discussion<BR><B>Subject:</B> Re: [jQuery] Table of information,expanding one
row using AJAX call and callback function.<BR></FONT><BR></DIV>
<DIV></DIV>First, you can not animate table rows (tr) because almost all of the
motion animations are written for block level elements. You could, however,
place the information within a couple of divs and position them to get the look
and feel you currently have with tables. This will allow you to use most of the
Interface animations and prevent you from committing misuse of a table.
<BR><BR>Second, if you were wanted to grab the ID of the TR element upon
clicking the IMG element in the following code:<BR><BR><tr
id="foo"><td><img src="bar.gif"/></td></tr>
<BR><BR>You would need the following code (I prefer using the higher level
click(), hover(), etc functions as opposed to
bind()):<BR><BR>$("img").click(function(){<BR>
$(this).parent().parent().attr("id"); <BR>});<BR><BR>As the TR element is the
parent of the parent of the IMG.<BR><BR>Finally, there are a lot of examples
throughout the mailing list of how to add dynamic "load on click" functionality,
a good place to start is <A
href="http://docs.jquery.com/Ajax">http://docs.jquery.com/Ajax</A>.<BR><BR>-
jake<BR><BR><BR>
<DIV><SPAN class=gmail_quote>On 3/28/07, <B class=gmail_sendername>Andy
Matthews</B> <<A href="mailto:amatthews@dealerskins.com">
amatthews@dealerskins.com</A>> wrote:</SPAN>
<BLOCKQUOTE class=gmail_quote
style="PADDING-LEFT: 1ex; MARGIN: 0pt 0pt 0pt 0.8ex; BORDER-LEFT: rgb(204,204,204) 1px solid">
<DIV>
<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></FONT>
<DIV><FONT face=Arial size=2><BR> $(document).ready(
function(){</FONT></DIV>
<DIV><FONT face=Arial size=2></FONT> </DIV>
<DIV><FONT face=Arial size=2> $('.row td img').bind("click",
function()
{<BR> $('#row1details').slideDown("slow");<BR> });</FONT></DIV>
<DIV><FONT face=Arial size=2></FONT> </DIV>
<DIV><FONT face=Arial size=2> });</FONT></DIV>
<DIV><FONT face=Arial size=2></FONT> </DIV>
<DIV><FONT face=Arial size=2>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?</FONT></DIV>
<DIV><FONT face=Arial size=2></FONT> </DIV>
<DIV><FONT face=Arial size=2>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.</FONT></DIV>
<DIV><FONT face=Arial size=2></FONT> </DIV>
<DIV><FONT face=Arial size=2>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:</FONT></DIV>
<DIV><FONT face=Arial size=2></FONT> </DIV>
<DIV><FONT face=Arial size=2> $('.row td img').bind("click", function()
{<BR> this.parent('tr').attr('id');<BR> });</FONT></DIV>
<DIV><FONT face=Arial size=2></FONT> </DIV>
<DIV><FONT face=Arial size=2> But it returns an error saying "Object
doesn't support this property or method.". What am I doing wrong?</FONT></DIV>
<DIV><FONT face=Arial size=2></FONT> </DIV>
<DIV><FONT face=Arial size=2> Please feel free to answer any one of these
questions...</FONT></DIV></DIV>
<DIV> </DIV>
<DIV align=left><SPAN style="FONT-SIZE: 14px"><B><FONT face="Century Gothic">
<DIV align=left><SPAN><FONT face=Arial size=2><SPAN><FONT face=Arial
size=2>____________________________________</FONT></SPAN></FONT></SPAN></DIV>
<DIV><SPAN><FONT face=Arial size=2><SPAN></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">Senior Coldfusion
Developer</SPAN><BR></FONT></SPAN><SPAN style="FONT-SIZE: 11px"><FONT
face="Century Gothic"><FONT color=#808080><IMG alt="" hspace=0
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"><A
onclick="return top.js.OpenExtLink(window,event,this)"
href="mailto:amatthews@dealerskins.com"
target=_blank>amatthews@dealerskins.com</A><BR><A
onclick="return top.js.OpenExtLink(window,event,this)"
href="http://www.dealerskins.com/"
target=_blank>www.dealerskins.com</A></FONT></SPAN></DIV>
<DIV><FONT face=Arial
size=2></FONT> </DIV><BR>_______________________________________________<BR>jQuery
mailing list<BR><A onclick="return top.js.OpenExtLink(window,event,this)"
href="mailto:discuss@jquery.com">discuss@jquery.com</A><BR><A
onclick="return top.js.OpenExtLink(window,event,this)"
href="http://jquery.com/discuss/"
target=_blank>http://jquery.com/discuss/</A><BR><BR><BR
clear=all></BLOCKQUOTE></DIV><BR></BODY></HTML>
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/