1

Estou tentando recriar o componente de confirm nativo do javascript e me deparei com uma dúvida.

Exemplo:

if (confirm("meu texto vai aqui")) { // Aguarda retorno {true ou false}
  console.log("faça algo aqui");
}

Por padrão, enquanto o usuario não clicar em OK ou Cancelar ele não voltará para o fluxo do if. neste caso estou tentando reproduzi-lo.

Exemplo:

function msgConfirm(texto) {
  var resposta = $(".resposta");
  resposta.empty();
  var modal =
    "<div class='modal fade msgConfirm' tabindex='-1' role='dialog'>" +
    "   <div class='modal-dialog  modal-sm' >" +
    "      <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 class='modal-title' id='msgConfirmTitle'> </h4>" +
    "         </div>" +
    "         <div class='modal-body'>" +
    "            <p id='msgConfirmContent' > </p>" +
    "         </div>" +
    "         <div class='modal-footer' >" +
    "            <button type='button' class='btn btn-primary' id='msgConfirmConfirm' > Ok </button>" +
    "            <button type='button' class='btn btn-default' data-dismiss='modal' id='msgConfirmCancel' > Cancelar </button>" +
    "         </div>" +
    "      </div>" +
    "   </div>" +
    "</div>";

  resposta.append(modal);
  resposta.find("#msgConfirmContent").html(texto);
  resposta.find(".msgConfirm").modal("show");

  $("#msgConfirmConfirm").click(function() {
    return true;
  });
}

E no momento que eu o chamo o retorno é dado, sem intervenção do escutador de eventos click.

if (msgConfirm("meu texto vai aqui")) { // Retorno imediato {undefined}
  console.log("faça algo aqui");
}

Então o que eu preciso saber e, como eu posso reproduzir o comportamento do confirm?

1
  • Não consegui compreender o que você quis dizer...
    – LocalHost
    24/05/2016 às 13:58

1 Resposta 1

2

A diferênça entre a tua lógica e a do confirm nativo é que ele é síncrono e o teu modal é assincrono. Ou seja quando o browser usa o confirm nativo tudo pára e a variável que recebe o retorno do browser não é setada até clicarmos. No teu código tens de criar uma lógica assíncrona porque msgConfirm("meu texto vai aqui") é uma função que abre um modal e lança um auscultador de evento, e nada mais... aos olhos da função o seu trabalho está feito e retorna.

Podes fazer isso assim:

msgConfirm("meu texto vai aqui");
$("#msgConfirmConfirm").click(function() {
    // a partir daqui sabes que foi clicado 
    // e podes chamar a próxima função no código
});

Podes juntar uma lógica assim no teu modal também:

msgConfirm("meu texto vai aqui");
$("#msgConfirmContent").click(function() { // <- repara que usei #msgConfirmContent
    if (e.target.id == 'msgConfirmConfirm'){
        // fazer algo caso clique no OK
    } else if (e.target.id == 'msgConfirmCancel') {
        // fazer algo caso clique no CANCEL
    } else {
        // fazer algo caso clique noutro sitio...
    }
    // e podes chamar a próxima função no código
});
2
  • Mas ai você não esta encapsulando o auscultador de evento e terá que chamar cada vez que for utilizar função 24/05/2016 às 16:12
  • @GabrielRodrigues não é possivel parar o browser. Daí a solução do auscultador de eventos. Ou já tens um auscultador de eventos ativo ou então tens de juntar um novo cada vez que abrires o modal.
    – Sergio
    24/05/2016 às 16:21

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

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .