[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=800164920-28032007><FONT face=Arial
color=#0000ff size=2>Good point Jake. I'm just mocking up right now. I'll
consider the possibility of using floated divs in the final version. Thanks for
your viewpoint.</FONT></SPAN></DIV>
<DIV dir=ltr align=left><SPAN class=800164920-28032007><FONT face=Arial
color=#0000ff size=2></FONT></SPAN> </DIV>
<DIV dir=ltr align=left><SPAN class=800164920-28032007><FONT face=Arial
color=#0000ff size=2></FONT></SPAN> </DIV>
<DIV dir=ltr align=left><SPAN class=800164920-28032007><FONT face=Arial
color=#0000ff size=2>andy</FONT></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 3:21 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>Ah... but then it's no longer tabular because it exists across
multiple tables, therefore the whole reason for using a table is lost. I'm not
saying I'm an expert (or an accessibility/standards guru), but it's my
understanding that tables should be used only for data which has both an x and y
associations. Anyone care to correct me, am I being to strict? <BR><BR>-
jake<BR><BR>
<DIV><SPAN class=gmail_quote>On 3/28/07, <B class=gmail_sendername>Andy
Matthews</B> <<A
href="mailto:lists@commadelimited.com">lists@commadelimited.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 dir=ltr align=left><SPAN><FONT face=Arial color=#0000ff
size=2>Ahhhh</FONT></SPAN></DIV>
<DIV dir=ltr align=left><SPAN><FONT face=Arial color=#0000ff
size=2></FONT></SPAN> </DIV>
<DIV dir=ltr align=left><SPAN><FONT face=Arial color=#0000ff
size=2>$(this),parent()!!!</FONT></SPAN></DIV>
<DIV dir=ltr align=left><SPAN><FONT face=Arial color=#0000ff
size=2></FONT></SPAN> </DIV>
<DIV dir=ltr align=left><SPAN><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><FONT face=Arial color=#0000ff
size=2></FONT></SPAN> </DIV>
<DIV dir=ltr align=left><SPAN><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><FONT face=Arial color=#0000ff
size=2></FONT></SPAN> </DIV>
<DIV dir=ltr align=left><SPAN><FONT face=Arial color=#0000ff
size=2></FONT></SPAN> </DIV>
<DIV dir=ltr align=left><SPAN></SPAN> </DIV><BR>
<DIV lang=en-us dir=ltr align=left>
<HR>
<FONT face=Tahoma size=2><B>From:</B> <A
onclick="return top.js.OpenExtLink(window,event,this)"
href="mailto:discuss-bounces@jquery.com"
target=_blank>discuss-bounces@jquery.com</A> [mailto:<A
onclick="return top.js.OpenExtLink(window,event,this)"
href="mailto:discuss-bounces@jquery.com"
target=_blank>discuss-bounces@jquery.com</A>] <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><SPAN class=e id=q_11199faa34e74180_1>
<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
onclick="return top.js.OpenExtLink(window,event,this)"
href="http://docs.jquery.com/Ajax"
target=_blank>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 onclick="return top.js.OpenExtLink(window,event,this)"
href="mailto:amatthews@dealerskins.com" target=_blank>
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" target=_blank>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></SPAN></DIV></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></BLOCKQUOTE></DIV><BR></BODY></HTML>
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/