jQuery: FadeOut no funciona con la tabla Filas

Question

Tengo la siguiente tabla HTML en mi navegador. Estoy creando esta tabla desde mi archivo ASP.NET codebehind.

<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> 

y en mi Javascript tengo la función de borrado de la siguiente manera

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); 

}); 

}

Pero cuando llamo la función deleteItem, no estoy recibiendo los Effect.Its desvanecimiento simplemente escondite la fila como la pantalla = "ninguno".

¿Alguien me puede ayudar a solucionarlo?

Answer 1

Hay un problema en jQuery al ocultar trs. Esta es la solución actual hasta que hagan algo similar en el núcleo, si así lo deciden.

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

Esto oculta básicamente el tds en la fila, en lugar de la fila actual. Luego elimina la fila del DOM. Funciona en todos los navegadores, creo. Sin embargo, podría dirigirse a IE específicamente si fuese necesario.

Answer 2

Estas dos cosas son diferentes:

• ocultar la fila, ya sea por ocultar(), fadeOut(), slideUp(), la aplicación de una clase, el establecimiento de un valor CSS o por medio de una animación; y
• eliminando el elemento del DOM.

Si leo lo que dice correctamente, quiere hacer ambas cosas. Si es así, intente esto:

function deleteItem(modelId,itemindexId, rowId) { 
    $.get("RemoveFromCart.aspx", { 
    model: modelId, 
    cartItem: itemindexId, 
    mode: "removefromcart", 
    rand:Math.random() 
    }, function(data) { 
    var row=$("#"+rowId);  
    row.fadeOut(1000, function() { 
     row.remove(); 
    }); 
    }); 
}; 

Básicamente esto es decir:

• GET RemoveCart.aspx en el servidor con los parámetros dados;
• Cuando la función retorna, comience a atenuar la fila en un período de un segundo;
• Cuando se completa ese fadeOut, elimínelo del DOM.

Answer 3

Si bien la solución de Jab es una forma de evitar el problema, contiene un error. Específicamente, su función de devolución de llamada para eliminar el elemento padre va a disparar una vez por cada elemento 'td' en esa fila, cuando en realidad debería disparar solo una vez para el último. Esto se puede demostrar colocando una llamada de alerta en la devolución de llamada, que se verá una vez por cada td en la fila.

todavía tengo que encontrar una manera muy ordenada en torno a este, pero que terminó con algo en la línea de este:

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) 
     } 
    }); 
} 

llamar a este usaría algo como esto:

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

NOTA: Mi versión no elimina la fila del dom porque solo quiero ocultarla/mostrarla, pero debería ser bastante fácil de adaptar.

Answer 4

Jquery ahora se puede utilizar como esto:

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

Answer 5

A partir de jquery 1.6 puede utilizar promesas para ejecutar una sola llamada de retorno después de todos td animaciones están acabados.

$('td', row).each(function() { 
    $(this).fadeOut('slow', 'linear'); 
}) 
.promise() 
.done(function() { 
    $(this).parent('tr').remove(); 
});