Chrome does not apply Addclass before calling window.confirm

Question

Problem:

Chrome is not rendering my class addclass before the call from my confirmation window window.confirm it is as if it got stuck and was released only after confirm.

What I did was put the function call ConfirmaExclusao in OnClientClick of a image button that is inside a TemplateField in a gridview, the intention of confirm when it returns false is not calling the RowCommand in which actual exclusion.

This solution for IE 9, 10 and 11 works, but pro Chrome does not...

Example:

Here’s an example of the problem http://jsfiddle.net/BvMFs/2/ you can see that for Chrome the class is applied after exit of the confirm window.

My Functions javascript:

function MarcarLinha(linha) {
    //Soma 2 na linha (1 linha do Cabeçalho e mais uma poque o TR da grid começa em 1, não em zero)
    linha = linha + 2;

    //Limpa todas as marcações
    $('[id$=gridViewListaCondicoesComlRCTRVI]').find('tr').each(function (row) {
        $(this).removeClass('hover_row');
    });

    $('[id$=gridViewListaCondicoesComlRCTRVI] tr:nth-child(' + linha + ')').addClass('hover_row');
}

function ConfirmaExclusao(linha) {
    MarcarLinha(linha);

    //Confirmar a exlusão
    if (window.confirm('Deseja realmente excluir este registro?'))
        return true;
    else {
        //$('[id$=gridViewListaCondicoesComlRCTRVI] tr:nth-child(' + linha + ')').removeClass("hover_row");
            return false;
    }
}

My Imagebutton inside the gridview:

<ItemTemplate>
    <asp:ImageButton ID="imgBtnExcluir32" runat="server" CommandName="Excluir" CommandArgument='<%#Container.DataItemIndex%>'
    ImageUrl="~/images/delete.png" OnClientClick='<%# "return ConfirmaExclusao(" + ((GridViewRow)Container).RowIndex + ");" %>' />
</ItemTemplate>

Answer 1

Javascript is an interpreted function, and the browser interprets it line by line. But the browser does it very quickly where it ends up running the lines below the function call before the function is even executed.

To avoid this kind of problem, you can use the callback technique:

function MarcarLinha(linha, callback) {
    //Soma 2 na linha (1 linha do Cabeçalho e mais uma poque o TR da grid começa em 1, não em zero)
    linha = linha + 2;

    //Limpa todas as marcações
    $('[id$=gridViewListaCondicoesComlRCTRVI]').find('tr').each(function (row) {
       $(this).removeClass('hover_row');
    });

    $('[id$=gridViewListaCondicoesComlRCTRVI] tr:nth-child(' + linha + ')').addClass('hover_row');

    callback(); // A função passada será executada aqui
}

function ConfirmaExclusao(linha) {
    MarcarLinha(linha, function() {
        //Confirmar a exlusão
        if (window.confirm('Deseja realmente excluir este registro?'))
            return true;
        else {
            //$('[id$=gridViewListaCondicoesComlRCTRVI] tr:nth-child(' + linha + ')').removeClass("hover_row");
            return false;
        }
    });
}

I hope I’ve helped!