jQuery Forum

.next() only gets siblings, so you won't be able to select the new <td> as it's nested one deeper than the <tr> you're searching from.
I have similar functionality in a program of mine, here is how I did it:
$("#table_Orders tbody tr").bind("click", function() {
    $("#expanded").remove();
    if ($(this).is(".selected")) {
      var row = this;
      var data = ajaxData(ORDERS, "expandLine", [getSelected(this)]);
      $.get(RPC, data, function(html) {
        if ($(row).is(".selected")) { // Makes sure row is still selected after AJAX request completes
          $(row).after("<tr><td id='expanded' colspan='"+row.cells.length+"'>"+html+"</td></tr>");
        }
      });
    }
  });
Ignore all the ".selected" stuff...
Chris
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Actually the .selected stuff is relevant to your problem I think...
I have generic logic elsewhere that gives a selected row a .selected class, and highlights the row. You can see from my example that it removes any "expanded previews" first, then only if the row is actually selected (as opposed to just being deselected) will it add the preview row.
Chris
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

i am sorry - but i have been looking at this code for a while and i cant
figure what exactly it is doing (sorry i'm a noob). could you possibly
break it down and explain whats going on in each step?
Chris Domigan

Try creating the element then using chaining to manipulate it:
$("<tr><td colspan='4'
class='description'></td></tr>").insertAfter(this).load(...).toggle();
But are you sure this is what you want? You'll end up creating a new row
each time it's clicked, not toggling
the old row. Why not create the (empty) description line when the table is
created, then hiding it:
$('.description').hide();
Then next() will do what you want:
$(this).next('.description').load(...).toggle();
Danny
bdee

yea i dont want to create a new row every time it is clicked. i guss what i
want to do is to create a details row when the first row is clicked - but
only if the details row hasnt already been created. if its already been
created then i want to remove it.
the reason i dotn want to add the empty rown when the table loads and then
hide it is that it adds to the initial load time of th page. and all the
empty rows aren't hidden until the page is completely loaded so it looks
messy until the hide function kicks in to hide the detail rows.
i m really not sure how to proceed with this.
Danny Wachsstock wrote:
>
> Try creating the element then using chaining to manipulate it:
>
> $("<tr><td colspan='4'
> class='description'></td></tr>").insertAfter(this).load(...).toggle();
>
> But are you sure this is what you want? You'll end up creating a new row
> each time it's clicked, not toggling
> the old row. Why not create the (empty) description line when the table is
> created, then hiding it:
>
> $('.description').hide();
>
> Then next() will do what you want:
>
> $(this).next('.description').load(...).toggle();
>
> Danny
>
>
> bdee

How about:
// check for a sibling to this
var sibling = $(this).next('tr');
// if that sibling has the right class, use it
if (sibling.is('.description')){
sibling.load(...).toggle();
}else{
// create the new row and fill it (don't toggle--that would only hide it
$("<tr><td colspan='4'
class='description'></td></tr>").insertAfter(this).load(...);
}
bdee wrote:
>
> yea i dont want to create a new row every time it is clicked. i guss what
> i want to do is to create a details row when the first row is clicked -
> but only if the details row hasnt already been created. if its already
> been created then i want to remove it.
>
> the reason i dotn want to add the empty rown when the table loads and then
> hide it is that it adds to the initial load time of th page. and all the
> empty rows aren't hidden until the page is completely loaded so it looks
> messy until the hide function kicks in to hide the detail rows.
>
> i m really not sure how to proceed with this.
>
>
> Danny Wachsstock wrote:
>>
>> Try creating the element then using chaining to manipulate it:
>>
>> $("<tr><td colspan='4'
>> class='description'></td></tr>").insertAfter(this).load(...).toggle();
>>
>> But are you sure this is what you want? You'll end up creating a new row
>> each time it's clicked, not toggling
>> the old row. Why not create the (empty) description line when the table
>> is created, then hiding it:
>>
>> $('.description').hide();
>>
>> Then next() will do what you want:
>>
>> $(this).next('.description').load(...).toggle();
>>
>> Danny
>>
>>
>> bdee

THANK YOU for helping me understand this!
i used what you posted to help come up with the final solution which is as
follows:
$("tr.listing").click(function(){
var sibling = $(this).next('tr');
var myID = $(this).attr("id");
if (sibling.is('.expanded')){
sibling.toggle();
}
else{
$(this).after("<tr class='expanded'><td colspan='4'
class='description'><div id='overview"+myID+"'></div>
./moviedetails.asp?movie="+myID+" View Details </td></tr>");

$(this).next().find(".description").find("#overview"+myID).load("movieDetailsAjax.asp?movie="+myID);
}
});
seems to work nicely - thanks again everyone for your help!
Danny Wachsstock wrote:
>
> How about:
>
> // check for a sibling to this
> var sibling = $(this).next('tr');
> // if that sibling has the right class, use it
> if (sibling.is('.description')){
> sibling.load(...).toggle();
> }else{
> // create the new row and fill it (don't toggle--that would only hide
> it
> $("<tr><td colspan='4'
> class='description'></td></tr>").insertAfter(this).load(...);
> }
>
>
> bdee wrote:
>>
>> yea i dont want to create a new row every time it is clicked. i guss
>> what i want to do is to create a details row when the first row is
>> clicked - but only if the details row hasnt already been created. if its
>> already been created then i want to remove it.
>>
>> the reason i dotn want to add the empty rown when the table loads and
>> then hide it is that it adds to the initial load time of th page. and
>> all the empty rows aren't hidden until the page is completely loaded so
>> it looks messy until the hide function kicks in to hide the detail rows.
>>
>> i m really not sure how to proceed with this.
>>
>>
>> Danny Wachsstock wrote:
>>>
>>> Try creating the element then using chaining to manipulate it:
>>>
>>> $("<tr><td colspan='4'
>>> class='description'></td></tr>").insertAfter(this).load(...).toggle();
>>>
>>> But are you sure this is what you want? You'll end up creating a new row
>>> each time it's clicked, not toggling
>>> the old row. Why not create the (empty) description line when the table
>>> is created, then hiding it:
>>>
>>> $('.description').hide();
>>>
>>> Then next() will do what you want:
>>>
>>> $(this).next('.description').load(...).toggle();
>>>
>>> Danny
>>>
>>>
>>> bdee