Javascript 表单提交上的引导模式未在正确点显示_Javascript_Html_Jquery_Css

Javascript 表单提交上的引导模式未在正确点显示

javascript html jquery css

Javascript 表单提交上的引导模式未在正确点显示,javascript,html,jquery,css,Javascript,Html,Jquery,Css,要求我想在上传文件并将其附加到电子邮件时向用户显示一条固定消息，以阻止单击返回或刷新页面或重复单击提交按钮背景我正在使用bootstrap v3.3.7和JQuery v3.3.1 我认为解决这个问题的一个好方法是使用引导模式插件，尤其是当我意识到可以使用以下方法修复屏幕上的模式时： $（“#modal foo”）.modal（{background:'static'，键盘：false}）；我有以下建议： @model Web.ViewModels.Site.Foo.FooViewMo

要求

我想在上传文件并将其附加到电子邮件时向用户显示一条固定消息，以阻止单击返回或刷新页面或重复单击提交按钮

背景

我正在使用bootstrap v3.3.7和JQuery v3.3.1

我认为解决这个问题的一个好方法是使用引导模式插件，尤其是当我意识到可以使用以下方法修复屏幕上的模式时：

$（“#modal foo”）.modal（{background:'static'，键盘：false}）；

我有以下建议：

@model Web.ViewModels.Site.Foo.FooViewModel
上载文件并提交以供审阅
我们目前正在上载并提交您的文件以供审阅
这可能需要一些时间。发生这种情况时，请不要点击后退按钮或尝试刷新此页面

我有以下表格：

我有以下按钮：

以及以下jquery：

//当dom加载钩子时
$.when（$.ready）.然后（函数（）{
$（'#fooform'）。在（'submit'，函数（）{
if（$（this）.valid（））{
//我们已经通过了不引人注目的验证，因此现在将消息呈现给用户
$（“模态foo”）.modal({
背景：“静态”，
键盘：错误
});
}
});
})

问题

我所希望的是，一旦不引人注目的验证通过，模式就会出现，并一直显示，直到用户被重定向到感谢页面

我发现，直到过程的后期，模态才出现

例如，如果我使用下面的代码输入一些警报以查看发生了什么，则模式直到“here3”之后才会出现。这就好像.modal正在向浏览器触发一条指令以显示该模式，但它不会立即对其进行操作

//当dom加载钩子时
$.when（$.ready）.然后（函数（）{
$（'#fooform'）。在（'submit'，函数（）{
警报（“此处1”）；
if（$（this）.valid（））{
//我们已经通过了不引人注目的验证，因此现在将消息呈现给用户
警报（“此处2”）；
$（“模态foo”）.modal({
背景：“静态”，
键盘：错误
});
警报（“此处为3”）；
}
});
})

实现要求的备选方案

我尝试过使用锚而不是提交按钮，但是模式直到“here3”之后才出现：

提交

Javascript函数：

函数showmodel（）{
if（$（'#fooform'）.valid（）{
//我们已经通过了不引人注目的验证，因此现在将消息呈现给用户
警报（“此处1”）；
$（“模态foo”）.modal({
背景：“静态”，
键盘：错误
});
警报（“此处2”）；
//我是否可以以某种方式将提交包装在承诺或委托中，以便在模式出现后进行提交？
$（'#fooform'）。提交（）；
警报（“此处为3”）；
}
}

问题

我怎样才能达到我的要求？根据我在上面Javascript函数中的评论，我是否可以将表单提交包装在承诺或委托中，或者我是否可以在模式显示后在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必须在其他插件之前插入，插入

以上代码首先，那就试试看,

我在下面包含完整的工作代码

<!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>


引导示例
@模型Web.ViewModels.Site.Foo.FooViewModel
上载文件并提交以供审阅
我们目前正在上载并提交您的文件以供审阅
这可能需要一些时间。发生这种情况时，请不要点击后退按钮或尝试刷新此页面
提交
函数showmodel（）{
if（$（'#fooform'）.valid（）{
//我们已经通过了不引人注目的验证，因此现在将消息呈现给用户
警报（“此处1”）；
$（“模态foo”）.modal({
背景：“静态”，
键盘：错误
});
警报（“此处2”）；
//我是否可以以某种方式将提交包装在承诺或委托中，以便在模式出现后进行提交？
//$（'#fooform'）。提交（）；
警报（“此处为3”）；
}
}

最后，我通过使用以下工具实现了这一点。希望其他人会发现这一点很有用：

相同的按钮和表单

模态

注意第一个div上的附加

数据背景

和

数据键盘

属性

@model Web.ViewModels.Site.Foo.FooViewModel
上载文件并提交以供审阅
我们目前正在上传和下载
<!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>