在向数据库提交数据期间，如何阻止 Bootstrap Modal 弹出窗口关闭？

Question

我有一个位于 Bootstrap Modal 中的评论系统，在从数据库中提取数据和输入数据的能力方面一切正常。问题出在提交上。

以下是我的提交代码。

$(document).ready(function(){
var form = $('form');
var submit = $('#submit');

form.on('submit', function(e) {
    e.preventDefault();
    $.ajax({
        url: 'projectnoteuploads.php',
        type: 'POST',
        cache: false,
        data: form.serialize(),
        success: function(data){
            console.log(data);
            var item = $(data).hide().fadeIn(800);
            $('.comment-block').append(item);
        },
        error: function(e){
            alert(e);
        }
    });
});
});

myjobspage.php - 这是我在主页上的模式的开始，它是从 Notes 按钮调用的

<div id="projnotes" class="modal fade modal-scroll" tabindex="-1" data-width="960">
</div>

我最初在上面的 div 中保留了模态框的其余部分，但是当我遇到关闭表单并刷新页面的问题时，我决定将模态框移到另一个页面上，并在按钮时调用它被点击了，但还是有同样的问题

这是模态代码

<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<h4 class="modal-title">Project Notes</h4>
 </div>
    <div class="modal-body">
    <div class="row">
    <div class="col-md-12">
        <!-- Table shown here (no need to show as not involved) -->
    </div>
</div>
<div class="row">
<div class="col-md-12">
    <!--comment form -->
    <form class="notesform" id="notesform" name="notesform" method="post">
        <!-- need to supply post id with hidden fild -->
        <input type="hidden" name="postid" value="<?php echo $propid; ?>">
        <input type="hidden" name="projno" value="<?php echo $projectno; ?>">
        <input type="hidden" name="name" value="<?php echo $inputby; ?>">
        <div class="col-md-12 ">
            <div class="form-group">
                <label for="inputEmail12" class="col-md-2 control-label">Project Notes *</label>
                <div class="col-md-8">
                    <textarea class="form-control col-md-8" rows="3" name="comment" id="comment"placeholder="Type your comment here...." required></textarea>
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-offset-2 col-md-10">
                    <br>
                    <input type="submit" class="btn green" id="savenotes" name="submit"  value="Submit Comment" />                        
                </div>
            </div>
        </div>
    </form>
</div>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-default">Close</button>
</div>

关于此的一个问题是，调用 jquery/Ajax 代码是通过我的主页完成的，这是正确的还是应该通过模型主体所在的页面完成？

当点击提交按钮id="savenotes"时，模式关闭并刷新页面，丢失主页内的所有数据。

如何在不关闭 Modal 的情况下向数据库提交数据？

Answer 1

我不知道你是否找到了答案，但至少对于其他可能需要解决方案的人来说，就像我曾经做过的那样。

这是名为modal.php的模态页面：

  <div id="projnotes" class="modal fade modal-scroll" tabindex="-1" 
     data-
  width="960">
  <!-- div wrapper for modal dialog -->
  <div class="modal-dialog">
  <!-- div wrapper for modal content -->
  <div class="modal-content">

 <div class="modal-header">
 <button type="button" class="close" data-dismiss="modal" aria-
  hidden="true"></button>
 <h4 class="modal-title">Project Notes</h4>
  </div>
  <!-- I guess you wanted your body centered .justify-content-center 
  should fix that -->
 <div class="modal-body justify-content-center">
 <div class="row">
  <div class="col-md-12">
      <!-- Table shown here (no need to show as not involved) -->
  </div>
 </div>
  <!-- I guess you wanted your form centered .justify-content-center 
   would fix that -->
 <div class="row justify-content-center">
    <!--comment form -->
 <form class="notesform form-block" id="notesform" name="notesform" 
 method="post" action="projectnoteuploads.php">
  <!-- need to supply post id with hidden fild -->
  <input type="hidden" name="postid" value="<?php echo $propid = 
 'propid'; //replace variable $propid ?>">
  <input type="hidden" name="projno" value="<?php echo $projectno = 
    'projectno'; //replace variable $projectno ?>">
  <input type="hidden" name="name" value="<?php echo $inputby = 
      'inputby'; //replace variable $inputby ?>">
  <div class="form-group">
    <label for="comment" class="control-label">Project Notes *</label>
     <textarea class="form-control form-control-md" rows="3" cols="25" 
   name="comment" style="resize: none;" id="comment" placeholder="Type 
    your comment here...." required></textarea>
  </div>
  <input type="submit" class="btn btn-success" id="savenotes" 
  name="submit"  value="Submit Comment" />
  </form>
      </div>
 <!-- I can't find where your Comments are appended
 to, so I placed them here using the
  class name 'comment-block' as you used in your script -->
  <div class="row justify-content-center">
    <div class="comment-block"></div>
    </div>
   </div>
   <div class="modal-footer">
   <button type="button" data-dismiss="modal" class="btn btn-
   default">Close</button>
  </div>
  </div>
  </div>
  </div>

那么这是您的 myjobspage.php，您将在其中包含 modal.php

     <?php
   include 'modal.php';
     ?>
    <!DOCTYPE html>
   <html>
   <head>
    <meta charset="utf-8">
    <title>Myjobspage</title>
    <link rel="stylesheet" 
    href="path/to/bootstrap4.0.0/dist/css/bootstrap.min.css">
    <script src="path/to/Jquery_3.2.1/jquery-3.2.1.js"></script>
    <script src="path/to/bootstrap-
                  4.0.0/assets/js/vendor/popper.min.js">
       </script>
    <script src="path/to/bootstrap-4.0.0/dist/js/bootstrap.min.js">
     </script>
   </head>
   <body>
     <!-- Some Code Here-->
    <!-- Button to Launch Modal. Replace appropriately-->
    <button type="button" class="btn btn-primary" data-toggle="modal" 
   data-target="#projnotes">
       Launch  Comments Modal
     </button>
     <!-- some other code -->
     <!-- script to trigger your modal.php -->
    <script src="modalScript.js"></script>
    <script src="path/to/bootstrap-4.0.0/js/dist/util.js"></script>
     <script src="path/to/bootstrap-4.0.0/js/dist/modal.js"></script>
    </body>
    </html>

这是脚本 modalScript.js，它将通过 ajax 方法向 projectnoteuploads.php 发出请求。

 $(document).ready(function(){

  $('form').on('submit', function(e) {

   e.preventDefault();
   $.ajax({
    url: 'projectnoteuploads.php',
    type: 'POST',
    cache: false,
    data: $('form').serialize(),
    success: function(data){
        console.log(data);
        //This I guess was where the error was in the previous code.
     $('.comment-block').append(data).hide().fadeIn(800);
     $('textarea').val(''); //This will wipe out the textarea after 
    //comment input 

   },
    error: function(e){
        alert(e);
               }
           });
        });
     });

请注意，代码已全部从问题中修改，我试过了，它可以工作。