时间戳

首页 > 解决方案 > Bootstrap modal on form submit not displaying at correct point

javascript - Bootstrap modal on form submit not displaying at correct point

问题描述

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?

标签： javascripthtmljquerycss

解决方案

问题是当您单击提交按钮时，您的页面重新加载，这就是您看不到模式的原因

$.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>

推荐阅读