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.