0

Tenho uma div modal do bootstrap que fica na "masterpage" _Layout.csthml.

<div id="ModalAlteracao" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 id="TituloModalAlteracao" class="modal-title">Atenção</h4>
            </div>
            <div class="modal-body">
                <p>
                    Houve alteração de dados nesta tela, as demais informações das telas seguintes serão apagadas.
                </p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">Cancelar</button>
                <button id="btnConfirmarAlteracao" type="button" class="btn btn-primary">Salvar</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>

Criei uma função que é chamada em várias Views diferentes, para abrir essa modal, e ao clicar no botão Salvar, seja executado uma função javascript passada por parâmetro.

function confirmarAlteracao(callback) {
        $("#btnConfirmarAlteracao").click(function () {
            callback();
            $('#ModalAlteracao').modal('hide');
        });

        $('#ModalAlteracao').modal('show');
 }

Exemplo de chamada dessa função:

function salvarPlaca() {
    if (!houveAlteracaoPlaca()) {
        efetivarAlteracaoPlaca();
    }
    else {
        // exibe o dialog de confirmação, e passa a função de callback caso o usuário clique em "sim"
        confirmarAlteracao(efetivarAlteracaoPlaca);
    }

}

O problema é que se o usuário clicar em Cancelar, e depois clicar de novo no botão que executa salvarPlaca, e nessa segunda vez confirmar, a função efetivarAlteracaoPlaca está sendo executada duas vezes.

1 Resposta 1

2

Você está associando um evento novo ao elemento btnConfirmarAlteracao toda vez que chama a função confirmarAlteracao. Ou você aplica o unbind da função registrada anteriormente, ou adota outra estratégia. Aqui está um exemplo usando closures para resolver o problema:

var currentCallback = $.noop;

$("#btnConfirmarAlteracao").click(function () {
    currentCallback();
    $('#ModalAlteracao').modal('hide');
});

function confirmarAlteracao(callback) {
    currentCallback = callback;
    $('#ModalAlteracao').modal('show');
}

NOTA: Eu iria preferir usar Promises nesse cenário... como estou saindo do trabalho agora, quando chegar em casa edito essa resposta para lhe passar uma solução usando Promises.

1
  • Valeu.Deu certo essa solução! Se for postar as outras, e der certo eu aceito a resposta. Mas por hora isso atendeu de forma simples!
    – user26552
    19/09/2016 às 11:54

Você deve fazer log-in para responder a esta pergunta.