要求
我想在上传文件并将其附加到电子邮件时向用户显示一条固定消息，以阻止点击返回或刷新页面或重复点击提交按钮。
背景
我正在使用 bootstrap v3.3.7 和 JQuery v3.3.1。
我认为解决此要求的一个好方法是使用 Bootstrap Modal 插件，尤其是当我意识到您可以使用以下方法修复屏幕上的模态时:
$("#modal-foo").modal({backdrop: 'static',keyboard: false});
我有以下模态:
@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>
我有以下表格:
<form id="fooform" asp-action="fooaction" asp-controller="foocontroller" asp-route-fooid="@Model.FooId" method="post" enctype="multipart/form-data" class="form-horizontal">
我有以下按钮:
<input type="submit" value="Submit" class="btn btn-primary" />
以及以下 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
});
}
});
})
问题
我希望发生的是，一旦通过非侵入式验证，模态就会出现，并一直显示到用户被重定向到感谢页面。
我发现发生的情况是模态直到过程的后期才出现。
例如，如果我使用下面的代码放入一些警报以查看发生了什么，模态直到“here3”之后才会出现。就好像 .modal 正在向浏览器发出一条指令以显示模式，但它不会立即执行。
//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');
}
});
})
实现要求的替代尝试
我试过使用 anchor 而不是提交按钮，但同样，模式直到“here3”之后才会出现:
<a class="btn btn-primary" onclick="showModal();">Submit</a>
Javascript 函数:
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');
}
}
问题
我怎样才能达到我的要求？根据我在上面的 Javascript 函数中的评论，我可以将提交的表单包装在 promise 或委托(delegate)中，或者我可以在 DOM 上设置一些东西在模态显示后触发，或者是否有我应该查看的模态的替代方案？
最佳答案
问题是当你点击提交按钮时你的页面重新加载 这就是为什么你看不到你的模态
$.when($.ready).then(function () {
$('#fooform').on('submit', function (e) {
e.preventDefault();//added here
// if ($(this).valid()) {
//we've passed the unobtrusive validation so now present the message to the user
$("#modal-foo").modal({
backdrop: 'static',
keyboard: false
});
// }
});
})
请参阅您上面的代码，我使用“e.preventDefault()”来阻止您在点击时提交 现在你可以看到你的模型 但是你的 'valid()' 命令在这里不起作用，因为表单被阻止了 提交，这就是我评论的原因....
所以根据这个修改你的代码......
一种方法是使用 AJAX，您可以在不重新加载页面的情况下发送数据... 否则给一个按钮打开模型并在模型上放置提交按钮...
还有一次模型无法工作的机会......
在插入脚本时，jquery 必须在其他插件之前插入， 插入，
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
上面的代码首先， 然后试试，
我在下面包含了完整的工作代码
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
</head>
<body>
@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>
<form id="fooform" asp-action="fooaction" asp-controller="foocontroller" asp-route-fooid="@Model.FooId" method="post" enctype="multipart/form-data" class="form-horizontal">
</form>
<a class="btn btn-primary" onclick="showModal();">Submit</a>
</body>
<script>
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');
}
}
</script>
</html>
关于javascript - 表单提交上的 Bootstrap 模式未在正确的位置显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/63779899/