Tengo una función que encontré en línea y modifiqué que muestra un mensaje y ejecuta un controlador según la respuesta del usuario:
Esta función espera a que el usuario envíe una respuesta y ejecuta la función en consecuencia.
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) }) }
El problema es que quiero esperar la respuesta del usuario y que el controlador se ejecute antes de ejecutar la siguiente línea de código. Por ejemplo:
async function submit(){ disableInput() confirmDialog("Do you want to submit?", (userPressedYes) => { if(userPressedYes) { doSubmit(); //uses $.post() } } resetInput() }
En el ejemplo anterior, la función resetInput()
se ejecuta sin esperar la entrada del usuario. Necesito que espere una respuesta y, potencialmente, que el controlador se ejecute antes de restablecer la entrada.
Cualquier ayuda es apreciada.