Company logo
  • Empleos
  • Bootcamp
  • Acerca de nosotros
  • Para profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
    • Bootcamp
  • Para empresas
    • Inicio
    • Nuestro proceso
    • Planes
    • Pruebas
    • Nómina
    • Blog
    • Comercial
    • Calculadora

0

47
Vistas
asynchronous call to a confirm function with a handler function

I have a function I found online and modified which displays a prompt, and executes a handler depending on the response of the user:

This function waits for the user to submit a response and executes the function accordingly.

function confirmDialog(message, handler, options = ["Yes", "No"]) {
    $(`<div class="modal fade" id="confirmDialog" role="dialog"> 
     <div class="modal-dialog"> 
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Confirmation</h5>
            </div> 
            <div class="modal-body" style="padding:10px;"> 
                <p class="text-center">${message}</p> 
            </div>
             <div class="modal-footer text-center"> 
               <a class="btn btn-primary btn-yes">${options[0]}</a> 
               <a class="btn btn-secondary btn-no">${options[1]}</a> 
             </div> 
          </div> 
       </div> 
    </div> 
  </div>`).appendTo('body')

    //Trigger the modal
    $("#confirmDialog").modal({
        backdrop: 'static',
        keyboard: false
    })

    //Pass true to a callback function
    $(".btn-yes").click(function () {
        handler(true);
        $("#confirmDialog").modal("hide")
    })

    //Pass false to callback function
    $(".btn-no").click(function () {
        handler(false)
        $("#confirmDialog").modal("hide");
    })

    //Remove the modal once it is closed.
    $("#confirmDialog").on('hidden.bs.modal', function () {
        $("#confirmDialog").remove()
        $("#confirmDialog .btn-yes").prop("disabled", true)
    })
    $("#confirmDialog").on('show.bs.modal', function () {
        $("#confirmDialog .btn-yes").prop("disabled", true)
    })
}

The problem is that I want to wait for the user response, and the handler to execute before executing the next line of code. For example:

async function submit(){
  disableInput()  
  confirmDialog("Do you want to submit?", (userPressedYes) => {
         if(userPressedYes) {
           doSubmit(); //uses $.post()
          }
  }
  resetInput()
}

In the above example the resetInput() function executes without waiting for the input of the user. I need it to wait for a response, and potentially the handler to execute before resetting the input.

Any help is appreciated.

7 months ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos