Requirement
I want to display a fixed message to the user whilst a file is being uploaded and attached to an email to discourage clicking back or refreshing the page or repeatedly clicking the submit button.
Background
I'm using bootstrap v3.3.7 and JQuery v3.3.1.
I thought a good way to tackle this requirement was to make use of the Bootstrap Modal plugin, especially when I realised you could fix the modal on screen using:
$("#modal-foo").modal({backdrop: 'static',keyboard: false});
I have the following modal:
@model Web.ViewModels.Site.Foo.FooViewModel
<div class="modal fade" id="modal-foo" tabindex="-1" role="dialog" aria-labelledby="modal" aria-hidden="true" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title" id="modal-label">
<i class="fa fa-spin fa-spinner"></i> Uploading your file and submitting it for review
</h4>
</div>
<!-- Modal Body -->
<div class="modal-body">
<p>We're currently uploading and submitting your file for review.</p>
<p>This may take a few moments. Please do not hit the back button or try to refresh this page whilst this is happening.</p>
</div>
</div>
</div>
</div>
I have the following form:
<form id="fooform" asp-action="fooaction" asp-controller="foocontroller" asp-route-fooid="@Model.FooId" method="post" enctype="multipart/form-data" class="form-horizontal">
I have the following button:
<input type="submit" value="Submit" class="btn btn-primary" />
And the following jquery:
//when dom loaded hooks
$.when($.ready).then(function () {
$('#fooform').on('submit', function () {
if ($(this).valid()) {
//we've passed the unobtrusive validation so now present the message to the user
$("#modal-foo").modal({
backdrop: 'static',
keyboard: false
});
}
});
})
Issue
What I was hoping would happen is that the modal would appear once the unobtrusive validation has passed, and is displayed until the user is redirected to a thank you page.
What I'm finding happen is that the modal isn't appearing until later in the process.
For example, if I put some alerts in to see what's happening, using the code below, the modal doesn't appear until after 'here3'. It's as though the .modal is firing an instruction to browser to display the modal but it doesn't action it immediately.
//when dom loaded hooks
$.when($.ready).then(function () {
$('#fooform').on('submit', function () {
alert('here1');
if ($(this).valid()) {
//we've passed the unobtrusive validation so now present the message to the user
alert('here2');
$("#modal-foo").modal({
backdrop: 'static',
keyboard: false
});
alert('here3');
}
});
})
Alternative attempt to achieve requirement
I've tried using an anchor instead of a submit button but again, the modal doesn't appear until after 'here3':
<a class="btn btn-primary" onclick="showModal();">Submit</a>
Javascript function:
function showModal() {
if ($('#fooform').valid()) {
//we've passed the unobtrusive validation so now present the message to the user
alert('here1');
$("#modal-foo").modal({
backdrop: 'static',
keyboard: false
});
alert('here2');
//can I somehow wrap the submit in a promise or delegate so that after the modal appears it does the submit?
$('#fooform').submit();
alert('here3');
}
}
Question
How can I achieve my requirement? As per my comment in the Javascript function above, can I wrap the form submit in a promise or delegate or can I set something on the DOM to fire after the modal has displayed or is there an alternative to the Modal that I should look at?