数据库插入数据后如何弹出Modal提示框？

数据库插入数据后，预设的成功提示Modal未正常弹出。具体流程：

• 在tambahnotis.php中创建数据输入表单，提交至tambahnotisphp.php执行数据库插入操作
• 插入成功时，tambahnotisphp.php跳转回tambahnotis.php并携带参数?sucsess=true
• 在tambahnotis.php头部添加脚本，意图检测到该参数时触发id为modal-small的Modal，但弹窗无反应

tambahnotis.php 代码 #

<script type="text/javascript">
    <?php
    if ($_GET['sucsess'] == 'true'){
        echo '$(document).ready(function() {
            $( "#modal-small" ).dialog();
        });';
    }
    ?>
</script>

<form class="card" action="tambahnotisphp.php" method="post" enctype="multipart/form-data" runat="server" >
    <div class="card-body">
        <div class="mb-3">
            <div class="form-label required">Nombor Fail</div>
            <input type="text" class="form-control" name="nomborFail" id="nomborFail" required="" onkeyup="checkUsername(this.value);">
            <div id="uname_response" ></div>
        </div>
        <div class="mb-3">
            <div class="form-label required">Ulasan</div>
            <textarea class="form-control" id="ulasan" name="ulasan" rows="4" cols="50" required=""></textarea>
        </div>
        <div class="mb-3">
            <div class="form-label required">Tarikh Notis Siasatan Dikeluarkan</div>
            <input type="date" class="form-control" name="tarikhNotisKeluar" id="tarikhNotis1" required=""/>
        </div>

        <div class="card-footer">
            <div class="row align-items-center">
            <div class="col"></div>
                <div class="col-auto">
                    <button type="submit" name="submit" class="btn btn-primary btnTambahNotis">Tambah Notis</button>
                </div>
            </div>
        </div>
    </div>
</form>


<div class="modal modal-blur fade" id="modal-small" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog modal-sm modal-dialog-centered" role="document">
        <div class="modal-content">
          <div class="modal-body">
            <div class="modal-title">Success</div>
            <div>Notis Siasatan berjaya ditambah</div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-success" data-bs-dismiss="modal">Okay</button>
          </div>
        </div>
      </div>
</div>


<div class="modal modal-blur fade" id="modal-small2" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog modal-sm modal-dialog-centered" role="document">
        <div class="modal-content">
          <div class="modal-body">
            <div class="modal-title">Error</div>
            <div>Notis Siasatan tidak berjaya ditambah</div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-success" data-bs-dismiss="modal">Okay</button>
          </div>
        </div>
      </div>
</div>

tambahnotisphp.php 代码 #

<?php

    include('connection.php');
    $conn=Connect();
    
    $idPengguna = "DI200017";

    $nomborFail = $conn->real_escape_string($_POST['nomborFail']);
    $ulasan = nl2br($_POST['ulasan']);
    $status = "BELUM SELESAI";
    // Date entered in the format "yyyy/mm/dd"
    $tarikhNotisKeluar = $conn->real_escape_string($_POST['tarikhNotisKeluar']);

    // Add 30 days to the date
    $futureDate30Days = date('Y-m-d',strtotime($tarikhNotisKeluar . ' +30 days'));
    $futureDate60Days = date('Y-m-d',strtotime($tarikhNotisKeluar . ' +60 days'));
    
        
    $query = "INSERT INTO notis(nomborFail, ulasan, tarikhNotisKeluar, tarikhNotis1, tarikhNotis2, status, idPengguna) VALUES('" . $nomborFail . "','" . $ulasan . "','" . $tarikhNotisKeluar . "','" . $futureDate30Days . "','" . $futureDate60Days . "','" . $status . "','" . $idPengguna . "')";

    $success = $conn->query($query);
            
    if ($success){
        
    header("Location: tambahnotis.php?sucsess=true");
            
    $conn->close();
    }else{
        die("Data Notis Siasatan tidak dapat ditambah: ".$conn->error);

    }   


?>

解决方案 #

1. 修正参数拼写错误 #

参数名sucsess为拼写错误，正确应为success，需修改两处：

• 在tambahnotisphp.php的跳转代码中：

  header("Location: tambahnotis.php?success=true");
  

• 在tambahnotis.php的PHP判断中，同时添加isset()避免未传参数时的报错：

  if (isset($_GET['success']) && $_GET['success'] == 'true'){
  

2. 使用Bootstrap Modal正确调用方法 #

你的Modal是Bootstrap结构，不能用jQuery UI的.dialog()方法，需替换为Bootstrap官方调用方式：

<script type="text/javascript">
    <?php
    if (isset($_GET['success']) && $_GET['success'] == 'true'){
        echo 'document.addEventListener("DOMContentLoaded", function() {
            var myModal = new bootstrap.Modal(document.getElementById("modal-small"));
            myModal.show();
        });';
    }
    ?>
</script>

如果偏好jQuery写法，需确保已加载jQuery和Bootstrap JS，代码改为：

<script type="text/javascript">
    <?php
    if (isset($_GET['success']) && $_GET['success'] == 'true'){
        echo '$(document).ready(function() {
            $("#modal-small").modal("show");
        });';
    }
    ?>
</script>

3. 调整脚本加载位置 #

将弹窗触发脚本移至页面底部（</body>标签前），确保Bootstrap JS、jQuery（若使用）已加载完成，避免因依赖未加载导致代码执行失败。

4. 可选：完善错误弹窗逻辑 #

若插入失败，可跳转回tambahnotis.php?error=true并触发错误弹窗：

• 修改tambahnotisphp.php的错误分支：

  }else{
      header("Location: tambahnotis.php?error=true");
      $conn->close();
  }
  

• 在tambahnotis.php的脚本中添加错误弹窗触发逻辑：

  if (isset($_GET['error']) && $_GET['error'] == 'true'){
      echo 'document.addEventListener("DOMContentLoaded", function() {
          var myModal = new bootstrap.Modal(document.getElementById("modal-small2"));
          myModal.show();
      });';
  }
  

内容的提问来源于stack exchange，提问作者Kucen