jQuery :FadeOut not working with table Rows

Question

I have the following HTML table is rendered to my browser.I am creating this table from my ASP.NET codebehind file.

<table Class="tblTradeInCart">
    <tr class="tblCartHeader">
        <td>Item</td>
        <td>Model</td>
        <td> Price</td>
        <td>Delete</td>
    </tr>
    <tr id="tr_15_1">
        <td><img src="dia/images/LGVX9700.jpg" width="50" height="50" /></td>
        <td>LG VX9700</td>
        <td>$ 122</td>
        <td><a href='#' onclick="deleteItem(15,1,'tr_15_1')"><img src='..\Lib\images\NCcross.gif' style='border:0px'></a></td>
    </tr>
    <tr id="tr_11_8">
        <td><img src="dia/images/NOK5610.jpg" width="50" height="50" /></td>
        <td>NOKIA 5610</td>
        <td>$ 122</td>
        <td><a href='#' onclick="deleteItem(11,8,'tr_11_8')"><img src='..\Lib\images\NCcross.gif' style='border:0px'></a></td>
    </tr>
    <tr id="tr_14_9">
        <td><img src="dia/images/NOKN95.jpg" width="50" height="50" /></td>
        <td>NOKIA N95</td>
        <td>$ 91.5</td>
        <td><a href='#' onclick="deleteItem(14,9,'tr_14_9')"><img src='..\Lib\images\NCcross.gif' style='border:0px'></a></td>
    </tr>
</table>

and In my javascript i have the delete function as follows

function deleteItem(modelId,itemindexId, rowId)
{
   $.get("RemoveFromCart.aspx",{ model:modelId,cartItem:itemindexId,mode:"removefromcart",rand:Math.random() } ,function(data)
 { 
    //document.getElementById(rowId).style.display = "none";

    var row=$("#"+rowId);     
   row.fadeOut(1000);

});

}

But when i call the deleteItem function, I am not getting the fading Effect.Its simply hiding the row like the display="none".

Can any one guide me how to fix this ?

Answer 1

There is a problem in jQuery when hiding trs. This is the current workaround until they do something similar in the core, if they decide to.

row.find("td").fadeOut(1000, function(){ $(this).parent().remove();});

This basically hides the tds in the row, instead of the actual row. Then it removes the row from the DOM. It works in all browsers I believe. You could target IE specifically though if needed.

Answer 2

Whilst Jab's solution is a the way round the problem it does contain a bug. Specifically your callback function to remove the parent element is going to fire once for every 'td' element in that row, when really it should only fire once for the last one. This can be demonstrated by putting an alert call into the callback, which will be seen once for every td in the row.

I have yet to find a really neat way around this but I ended up with something along the lines of this:

function ShowHideTableRow(rowSelector, show, callback)
{
    var childCellsSelector = $(rowSelector).children("td");
    var ubound = childCellsSelector.length - 1;
    var lastCallback = null;

    childCellsSelector.each(function(i)
    {
        // Only execute the callback on the last element.
        if (ubound == i)
            lastCallback = callback

        if (show)
        {
            $(this).fadeIn("slow", lastCallback)
        }
        else
        {
            $(this).fadeOut("slow", lastCallback)
        }
    });
}

To call this you would use something like this:

ShowHideTableRow("#MyTableRowId",false,function() { // do something else ONCE when the row is hidden or shown... });

NOTE: My version does not remove the row from the dom because I just want to hide/show it but it should be fairly easy to adapt.

Answer 3

Jquery can now be used like this:

$("#id_of_your_tr").fadeOut(1000);