单击“更新按钮”后,启动箱确认框不起作用

时间:2019-09-25 01:33:24

标签: javascript php bootbox

当前,我开发了一个包含CRUD(创建,读取,更新删除)的系统。我的情况是,管理员需要更新某些信息的详细信息。

更新成功,但引导箱未出现。我以前注销时有所不同。引导对话框将弹出。我使用的方法是相同的。下面是我的完整代码

  <?php
  $sql = "";
  require_once "../../config/configPDO.php";
  require_once "../../config/check.php";

  if(isset($_POST['update']))
  { 
    $Email = $_POST['Email'];

    // checking empty fields
    if(empty($Email)) { 

      if(empty($Email)) {
        echo "<font color='red'>Fac_Name field is empty.</font><br/>";
      }

    } else {    
      //updating the table
      $sql = "UPDATE staff SET Role_ID = :Role_ID WHERE Email = :Email";
      $query = $conn->prepare($sql);

      $query->bindParam(':Role_ID', $_POST['Role_ID']);;
      $query->bindParam(':Email', $_POST['Email']);
      $query->execute();

      //redirectig to the display page. In our case, it is index.php
      header("Location: ../dashboard/dashboard_super_admin.php");
    }
  }
  ?>
  <?php
  //getting id from url
  $Email = $_GET['Email'];

  //selecting data associated with this particular id
  $sql = "SELECT * FROM staff LEFT JOIN roles on staff.Role_ID = roles.Role_ID WHERE Email = :Email";
  $query = $conn->prepare($sql);
  $query->execute(array(':Email' => $Email));

  while($row = $query->fetch(PDO::FETCH_ASSOC))
  {
    $Email = $row["Email"];;
    $Fullname = $row["Fullname"];
    $Badge_No = $row["Badge_No"];
    $Fac_ID = $row["Fac_ID"];
    $Role_Desc = $row["Role_Desc"];
    $Role_ID = $row["Role_ID"];
  }
  ?>


  <!DOCTYPE html>
  <html lang="en">
  <body>
    <form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post">
      <table class = "table table-bordered">
        <tr>
          <td width="20%"><b>Email</b></td>
          <td width="80%"><?php echo $Email; ?></td>
        </tr>
        <tr>
          <td width="20%"><b>Full Name</b></td>
          <td width="80%"><?php echo $Fullname; ?></td>
        </tr>
        <tr>
          <td width="20%"><b>Factory in Charge</b></td>
          <td width="80%"><?php echo $Fac_ID; ?></td>
        </tr>
        <tr>
          <td width="20%"><b>Role</b></td>
          <td width="80%">
            <select class="form-control" id="exampleFormControlSelect1" name="Role_ID">
              <option value="1" <?php echo $Role_ID == '1'? 'selected': '';?> >Super Admin</option>
              <option value="2" <?php echo $Role_ID == '2'? 'selected': '';?> >Admin</option>
              <option value="3" <?php echo $Role_ID == '3'? 'selected': '';?> >Normal</option>
            </select>
            <input type="hidden" name="Email" value="<?php echo $Email ?>">
          </td>
        </tr> 
      </table><br>
        <div align="center">
          <td><button class ="btn btn-primary btn-block" name="update" value="Update" onclick="update()">Update</button></td>
            </div>
    </form><br>             

  <!-- Bootbox -->
  <script src="../../bootbox/bootbox.all.js"></script>
  <script src="../../bootbox/bootbox.all.min.js"></script>
  <script src="../../bootbox/bootbox.locales.js"></script>
  <script src="../../bootbox/bootbox.locales.min.js"></script>
  <script src="../../bootbox/bootbox.min.js"></script>
  <!-- Bootbox End -->

  <!--update admin  -->
  <script>
  function update() {
    bootbox.confirm({
    title: "<span style='color: white;'><b>Update</b></span>",
    message: "Do you want to update?",
    buttons: {
        confirm: {
            label: 'Yes',
            className: 'btn btn-primary btn-sm'
        },
        cancel: {
            label: 'No',
            className: 'btn btn-danger btn-sm'
        }
    },
  callback: function (result) {
    if (result === true) {
          location.href = '../../dashboard/dashboard_super_admin.php';
      }else{

      }
    }
      });
  }
</script>
<!-- update admin -->

  </body>

  </html>

1 个答案:

答案 0 :(得分:0)

<button>的默认类型为submit,因此单击该按钮将触发表单/页面提交。如果您想让用户确认提交并使用Bootbox,则必须取消表单提交,因为Bootstrap(并因此是Bootbox)模态cannot block code execution

因此,从此开始:

function update(e) {
    e.preventDefault();

    bootbox.confirm({
        title: "<span style='color: white;'><b>Update</b></span>",
        message: "Do you want to update?",
        buttons: {
            confirm: {
                label: 'Yes',
                className: 'btn btn-primary btn-sm'
            },
            cancel: {
                label: 'No',
                className: 'btn btn-danger btn-sm'
            }
        },
        callback: function (result) {
            if (result) {
                location.href = '../../dashboard/dashboard_super_admin.php';
            }else{

            }
        }
    });
}

您的回调需要更新,因为这是一个GET请求,而不是POST。由于您使用的是Bootstrap,因此您也使用了jQuery或Zepto(或类似工具),因此您可以访问$.post函数:

function update(e) {
    e.preventDefault();

    bootbox.confirm({
        title: "<span style='color: white;'><b>Update</b></span>",
        message: "Do you want to update?",
        buttons: {
            confirm: {
                label: 'Yes',
                className: 'btn btn-primary btn-sm'
            },
            cancel: {
                label: 'No',
                className: 'btn btn-danger btn-sm'
            }
        },
        callback: function (result) {
            if (result) {
                let data = $('form').serialize();
                let url = '../../dashboard/dashboard_super_admin.php';

                $.post(url, data)
                    .done(function(response){
                        location.href = url;
                    })
                    .fail(function(){
                        bootbox.alert('Update failed');
                    });
            }else{

            }
        }
    });
}

serialize()会将您的表单编码为帖子助手可以理解的格式-其余的应该很简单。