Call function after fadeOut

Navigation
1

I have a function that removes the row from a table, after removing it I need to be called the function getTotal(); . But any way I put it does not work, because of the effect of the line, I need to wait for the effect to pass, and call the function. I'm currently doing this, but it's not working: 

function ExcluirProdutoPedido(linha) {
    if ($thatRow == null) {
        alert('Selecione uma linha para fazer a exclusão.');
    }
    else {
        $thatRow.closest("tr").fadeOut(500, function () {
            $thatRow.remove();
        })
        getTotal();
    }
}

How to proceed? EDIT

Function getTotal(); 

function getTotal() {
    debugger;
    let result = 0;
    let columns = $("#tablepesquisaprodutos tr td:nth-child(" + 8 + ")");

    columns.each(i => {
        result += parseFloat($(columns[i]).html().replace(/\./g, '').replace(',', '.'));
    });
    $("#ValorTotalPedido").val(result.toFixed(6).replace(".", ","));
    result = 0;
    columns = $("#tablepesquisaprodutos tr td:nth-child(" + 11 + ")");

    columns.each(i => {
        result += parseFloat($(columns[i]).html().replace(/\./g, '').replace(',', '.'));
    });
    $("#TICMS").val(result.toFixed(2).replace(".", ","));
    result = 0;
    columns = $("#tablepesquisaprodutos tr td:nth-child(" + 13 + ")");

    columns.each(i => {
        result += parseFloat($(columns[i]).html().replace(/\./g, '').replace(',', '.'));
    });
    $("#TISS").val(result.toFixed(2).replace(".", ","));
    result = 0;
    columns = $("#tablepesquisaprodutos tr td:nth-child(" + 15 + ")");

    columns.each(i => {
        result += parseFloat($(columns[i]).html().replace(/\./g, '').replace(',', '.'));
    });
    $("#TIPI").val(result.toFixed(2).replace(".", ","));
    var IPI = document.getElementById("TIPI").value;
    var TotalPedido = document.getElementById("ValorTotalPedido").value;
    var vIPI = 0;
    var vTotalpedido = 0;
    var vTotalProduto = 0;
    vIPI = Number(IPI.replace(/[R\$ \.]/g, '').replace(',', '.'));
    TotalPedido = Number(TotalPedido.replace(/[R\$ \.]/g, '').replace(',', '.'));
    vTotalProduto = TotalPedido - vIPI;
    document.getElementById("ValorProdutos").value = (parseFloat(vTotalProduto).toFixed(6).replace(".", ","));
    DescontoGlobal1();
}
    
asked by anonymous 18.09.2018 / 20:48

2 answers

4

The problem is that you are using .remove() in the element that called the function, that is, $thatRow . Note that fadeOut() is applied to the ancestor tr using closest("tr") , and when removing it, no.

Change the selector to: 

$(this).remove();

The $(this) points to the element that called fadeOut , that is, tr in $thatRow.closest("tr") .

And call the function getTotal() within the callback of fadeOut() : 

$thatRow.closest("tr").fadeOut(500, function () {
    $(this).remove();
    getTotal();
})

Hypothetical example : 

function ExcluirProdutoPedido(linha) {
    if (linha == null) {
        alert('Selecione uma linha para fazer a exclusão.');
    }
    else {
        $(linha).closest("tr").fadeOut(500, function () {
            $(this).remove();
            getTotal();
        })
    }
}

function getTotal(){
   let columns = $("#tablepesquisaprodutos tr td:nth-child(1)");
   let result = 0;
   columns.each(i => {
        result += parseFloat($(columns[i]).html().replace(/\./g, '').replace(',', '.'));
    });
    console.log(result);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><tablewidth="100%" border="1" id="tablepesquisaprodutos">
   <tr>
      <td>
         3
      </td>
      <td>
         <button onclick="ExcluirProdutoPedido(this)">Excluir</button>
      </td>
   </tr>
   <tr>
      <td>
         3
      </td>
      <td>
         <button onclick="ExcluirProdutoPedido(this)">Excluir</button>
      </td>
   </tr>
   <tr>
      <td>
         3
      </td>
      <td>
         <button onclick="ExcluirProdutoPedido(this)">Excluir</button>
      </td>
   </tr>
</table>
    
18.09.2018 / 21:34
1

You can put getTotal () just after remove (). If there is a problem, it may be because you have not had time to update the DOM after deleting the line, so a small timeout should resolve: 

$thatRow.closest("tr").fadeOut(500, function () {
            $thatRow.remove();
            setTimeout(
            function()  {
                getTotal();
             }, 100);
        })

Of course I could use the same code with setTimeout where the call to getTotal is currently, only adding a time slightly longer than the fadeOut effect, 600 for example: 

 $thatRow.closest("tr").fadeOut(500, function () {
        $thatRow.remove();
    })

    setTimeout(
    function()  {
       getTotal();
    }, 600);

But I do not think this is the best way, the first one I think is the best option.

    
18.09.2018 / 21:04
Convert Byte to Normal Text c # How to create a "trigger" function when a variable changes in value?