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 wrote:
>>>>
>>>>
>>>> and up above in the head of my document i have the following:
>>>> //show/hide description row on click
>>>> $("tr.listing").click(function(){
>>>> var myID = $(this).attr("id");
>>>> $(this).after("<tr><td colspan='4'
>>>> class='description'></td></tr>");
>>>>
>>>> $(this).next(".description").load("movieDetailsAjax.asp?movie="+myID);
>>>> $(this).next(".description").toggle();
>>>> });
>>>>
>>>> so the idea is that whenever you click a row with a class of "listing"
>>>> the following will happen:
>>>> set a variable congaing the movie id number
>>>> after the current row, insert a row with one cell spanning all 4
>>>> columns
>>>> then starting with the current row, find the next row with a class of
>>>> "description" (the row we just created) and load the content from the
>>>> ajax file (the html for the movie description and the thumbnail image)
>>>> then starting with the current row, find the next row with a class of
>>>> "description" (the row we just created) and toggle it. that way when
>>>> you click on the row again, it will close this cell.
>>>>
>>>>
>>>
>>>
>>
>>
>
>
--
View this message in context:
http://www.nabble.com/onclick---toggle-the-creation-of-a-TR--tf3230589.html#a8996389
Sent from the JQuery mailing list archive at Nabble.com.
_______________________________________________
jQuery mailing list
[email protected]
http://jquery.com/discuss/
