jQuery: FadeOut ne fonctionne pas avec des lignes de table

Question

Je le tableau HTML suivant est rendu à mes browser.I vais créer ce tableau de mon fichier behind ASP.NET.

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

et Dans mon javascript j'ai la fonction de suppression comme suit

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

});

}

Mais quand je l'appelle la fonction deleteItem, Je ne reçois pas les Effect.Its fading simplement masquage de la rangée comme l'affichage = "none".

Quelqu'un peut-il me guider comment résoudre ce problème?

Answer 1

Il y a un problème dans jQuery en se cachant trs. Ceci est la solution actuelle jusqu'à ce qu'ils font quelque chose de similaire dans le noyau, si elles décident de.

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

Ce cache essentiellement l'tds de la ligne, au lieu de la ligne réelle. Ensuite, il supprime la ligne du DOM. Il fonctionne dans tous les navigateurs, je crois. Vous pouvez cibler spécifiquement IE mais si nécessaire.

Answer 2

Alors que la solution de Jab est la façon de contourner le problème, il contient un bogue. Plus précisément votre fonction de rappel pour supprimer l'élément parent va tirer une fois pour chaque élément « td » dans cette ligne, alors qu'en réalité il ne devrait tirer une fois pour le dernier. Cela peut être démontré en mettant un appel d'alerte dans le rappel, qui sera vu une fois pour chaque td de la ligne.

Je dois encore trouver un moyen vraiment bien autour de cela, mais je me suis retrouvé avec quelque chose le long des lignes de ceci:

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

Pour appeler cela, vous utilisez quelque chose comme ceci:

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

NOTE: Ma version ne supprime pas la ligne du dom parce que je veux juste cacher / montrer, mais il devrait être assez facile à adapter

.

Answer 3

Jquery peut maintenant être utilisé comme ceci:

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

Answer 4

Ces deux choses sont différentes:

• Masquage de la rangée, soit par hide (), fadeOut (), slideUp (), l'application d'une classe, définition d'une valeur de CSS ou par l'intermédiaire d'une animation; et
• retirer l'élément du DOM.

Si je lis ce que vous dites bien, vous voulez faire les deux. Si oui, essayez ceci:

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

En gros, cela dit:

• GET RemoveCart.aspx sur le serveur avec les paramètres donnés;
• Lorsque cette fonction retourne, commencent à la décoloration de la rangée sur une période d'une seconde;
• Lorsque cette fadeOut est terminée, supprimez-le du DOM.

Answer 5

Au jquery 1.6 vous pouvez utiliser promet d'exécuter un seul rappel après tout animations td sont finies.

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