How to create synchronous functions to get the same behavior as confirm?

Question

How to create synchronous functions to get the same behavior as confirm?

Navigation

#1 by (2 votes)

1

I'm trying to recreate the native confirm component of javascript and I came across a question.

Example:

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

By default, as long as the user does not click OK or Cancel, it will not return to the if stream. in this case I'm trying to reproduce it.

Example:

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

And the moment I call it the return is given, without the intervention of the event listener.

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

So what do I need to know and how can I reproduce the behavior of the confirm?

javascript

asked by anonymous 24.05.2016 / 15:36

1 answer

how to use the POW function in C Insert text into images

score 2 · Accepted Answer

The difference between your logic and that of the confirm native is that it is synchronous and your modal is asynchronous. That is, when the browser uses the confirm native everything stops and the variable that receives the return of the browser is not set until we click. In your code you have to create asynchronous logic because msgConfirm("meu texto vai aqui") is a function that opens a modal and launches an event handset, and nothing else ... in the eyes of the function your work is done and it returns.

You can do it like this:

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

You can add logic like this to your modal too:

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