登录
当前位置： 首页 > 知识库问答 >
问题：

Boostrap数据模式Ajax成功问题

彭鸿彩
2023-03-14

我已经建立了一个网页，它有一个顶部固定的导航栏和一个带有分页的CRUD数据表，其中有打开模态的按钮。我似乎遇到的问题是，当我单击“删除”按钮时，模式会弹出，我可以删除记录，但是模式不会关闭，除非我单击模式之外的其他位置，并将“显示12个中的10个”的总记录添加到其中，直到我刷新页面，然后显示正确的值我在下面包含了我所有的代码。我不知道如何解决这个问题，任何援助都将不胜感激。

    //AJAX CODE
    //ADD
    $(document).on('click','#btn-add',function(e) {
        var data = $("#user_form").serialize();
        $.ajax({
            data: data,
            type: "post",
            url: "backend/save.php",
            success: function(dataResult){
                    var dataResult = JSON.parse(dataResult);
                    if(dataResult.statusCode==200){
                        $('#addEmployeeModal').modal('hide');
                        alert('Data added successfully !'); 
                        location.reload();                      
                    }
                    else if(dataResult.statusCode==201){
                       alert(dataResult);
                    }
            }
        });
    });
    $(document).on('click','.update',function(e) {
        var id=$(this).attr("data-id");
        var code=$(this).attr("data-code");
        var regno=$(this).attr("data-regno");
        var vatno=$(this).attr("data-vatno");
        var name=$(this).attr("data-name");
        var address=$(this).attr("data-address");
        var phone=$(this).attr("data-phone");
        var email=$(this).attr("data-email");       
        var person=$(this).attr("data-person");
        $('#id_u').val(id);
        $('#code_u').val(code);
        $('#regno_u').val(regno);
        $('#vatno_u').val(vatno);
        $('#name_u').val(name);
        $('#address_u').val(address);
        $('#phone_u').val(phone);
        $('#email_u').val(email);       
        $('#person_u').val(person);
    });
    //Update
    $(document).on('click','#update',function(e) {
        var data = $("#update_form").serialize();
        $.ajax({
            data: data,
            type: "post",
            url: "backend/save.php",
            success: function(dataResult){
                    var dataResult = JSON.parse(dataResult);
                    if(dataResult.statusCode==200){
                        $('#editEmployeeModal').modal('hide');
                        alert('Data updated successfully !'); 
                        location.reload();                      
                    }
                    else if(dataResult.statusCode==201){
                       alert(dataResult);
                    }
            }
        });
    });
    $(document).on("click", ".delete", function() { 
        var id=$(this).attr("data-id");
        $('#id_d').val(id);
        
    });
    $(document).on("click", "#delete", function() { 
        $.ajax({
            url: "backend/save.php",
            type: "POST",
            cache: false,
            data:{
                type:3,
                id: $("#id_d").val()
            },
            success: function(dataResult){
                    $('#deleteEmployeeModal').modal('hide');
                    $("#"+dataResult).remove();
            
            }
        });
    });
    $(document).on("click", "#delete_multiple", function() {
        var user = [];
        $(".user_checkbox:checked").each(function() {
            user.push($(this).data('user-id'));
        });
        if(user.length <=0) {
            alert("Please select records."); 
        } 
        else { 
            WRN_PROFILE_DELETE = "Are you sure you want to delete "+(user.length>1?"these":"this")+" row?";
            var checked = confirm(WRN_PROFILE_DELETE);
            if(checked == true) {
                var selected_values = user.join(",");
                console.log(selected_values);
                $.ajax({
                    type: "POST",
                    url: "backend/save.php",
                    cache:false,
                    data:{
                        type: 4,                        
                        id : selected_values
                    },
                    success: function(response) {
                        var ids = response.split(",");
                        for (var i=0; i < ids.length; i++ ) {   
                            $("#"+ids[i]).remove(); 
                        }   
                    } 
                }); 
            }  
        } 
    });
    $(document).ready(function(){
        $('[data-toggle="tooltip"]').tooltip();
        var checkbox = $('table tbody input[type="checkbox"]');
        $("#selectAll").click(function(){
            if(this.checked){
                checkbox.each(function(){
                    this.checked = true;                        
                });
            } else{
                checkbox.each(function(){
                    this.checked = false;                        
                });
            } 
        });
        checkbox.click(function(){
            if(!this.checked){
                $("#selectAll").prop("checked", false);
            }
        });
    });

//MY php CODE
<?php
session_start();
if (!isset($_SESSION["user_email"])) {
  header('location: login.html');
}
include 'backend/database.php';
?>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>
    PHP
  </title>
  <!-- favicon -->
  <link rel="icon" href="/assets/img/favicon.ico">
  <!-- ===== DATATABLE ===== -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css" />
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
  <!-- ===== DATATABLE STYLE ===== -->
  <link rel="stylesheet" href="http://localhost/PHP/assets/style.css">
  <!-- Style -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
  <!-- BOOTSTRAP MODAL -->
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
  <!-- AJAX -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="ajax/ajax.js"></script>
</head>

<body class="home">
  <!-- Navbar -->
  <header class="header">
    <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">LIMA RDF <i>Engineering</i></a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span></span>
          <span></span>
          <span></span>
        </button>
        <div class="collapse navbar-collapse justify-content-between" id="navbarSupportedContent">
          <ul class="navbar-nav" style="margin-left: auto;text-align: center;">
            <li class="nav-item">
              <a class="nav-link" aria-current="page" href="http://localhost/PHP/index.php">Home</a>
            </li>

            <li class="nav-item dropdown">
              <a class="nav-link active dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                Setup
              </a>
              <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                <li><a class="dropdown-item" href="http://localhost/PHP/partner.php">Business Partner</a></li>
                <li><a class="dropdown-item" href="#">Project</a></li>
                <li><a class="dropdown-item" href="#">Something else here</a></li>
              </ul>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                Dropdown
              </a>
              <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                <li><a class="dropdown-item" href="#">Action</a></li>
                <li><a class="dropdown-item" href="#">Another action</a></li>
                <li>
                  <hr class="dropdown-divider">
                </li>
                <li><a class="dropdown-item" href="#">Something else here</a></li>
              </ul>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                Dropdown
              </a>
              <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                <li><a class="dropdown-item" href="#">Action</a></li>
                <li><a class="dropdown-item" href="#">Another action</a></li>
                <li>
                  <hr class="dropdown-divider">
                </li>
                <li><a class="dropdown-item" href="#">Something else here</a></li>
              </ul>
            </li>
            <li class="nav-item">
              <button class="btn btn-outline-danger" type="button" onclick="window.location.href='./login/logout.php';">Log Out</button>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  </header>
  <!-- DATATABLE START-->
  <div class="container">
  <div>
      <a href="#addClientModal" class="btn btn-success" data-toggle="modal"><i class="material-icons">&#xE147;</i>
        <span>Add New Client</span></a>
    </div>   
    <div class="row">
      <div class="col-md-12">
        <div class="datatable">
          <table id="example" class="content-table table-hover" style="width:100%">
            <thead>
              <tr>
                <th style="text-align: center;">CLIENT NO</th>
                <th>NAME</th>
                <th>ADDRESS</th>
                <th>PHONE NO</th>
                <th>EMAIL</th>
                <th>CONTACT PERSON</th>
                <th style="text-align: center;">ACTION</th>
              </tr>
            </thead>
            <tbody>
              <?php
              $result = mysqli_query($conn, "SELECT * FROM tbl_client");
              $i = 1;
              while ($row = mysqli_fetch_array($result)) {
              ?>
                <tr id="<?php echo $row["id"]; ?>">
                  <td style="text-align: center;"><?php echo $row["code"]; ?></td>
                  <td><?php echo $row["name"]; ?></td>
                  <td><?php echo $row["address"]; ?></td>
                  <td><?php echo $row["phone"]; ?></td>
                  <td><?php echo $row["email"]; ?></td>
                  <td><?php echo $row["person"]; ?></td>

                  <td style="text-align: center;">
                    <a style="padding-left:5px;padding-right:5px;" href="#editClientModal" class="edit" data-toggle="modal">
                      <i class="material-icons update" data-toggle="tooltip" data-id="<?php echo $row["id"]; ?>" data-code="<?php echo $row["code"]; ?>" data-regno="<?php echo $row["regno"]; ?>" data-vatno="<?php echo $row["vatno"]; ?>" data-name="<?php echo $row["name"]; ?>" data-address="<?php echo $row["address"]; ?>" data-phone="<?php echo $row["phone"]; ?>" data-email="<?php echo $row["email"]; ?>" data-person="<?php echo $row["person"]; ?>" title="Edit"><span class="fa fa-pencil"></span></i>
                    </a>
                    <a style="padding-left:5px;padding-right5px;" href="#deleteClientModal" class="delete" data-id="<?php echo $row["id"]; ?>" data-toggle="modal"><i class="material-icons" data-toggle="tooltip" title="Delete"><span class="fa fa-trash"></span></i></a>
                  </td>
                </tr>
              <?php
                $i++;
              }
              ?>
            </tbody>
          </table>
          <!-- Add Modal HTML -->
          <div id="addClientModal" class="modal fade">
            <div class="modal-dialog">
              <div class="modal-content">
                <form id="user_form">
                  <div class="modal-header">
                    <h4 class="modal-title">Add User</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                  </div>
                  <div class="modal-body">
                    <div class="form-group">
                      <label>CLIENT CODE</label>
                      <input type="text" id="code" name="code" class="form-control" required>
                    </div>
                    <div class="form-group">
                      <label>BUSINESS REGISTRATION NO.</label>
                      <input type="text" id="regno" name="regno" class="form-control" required>
                    </div>
                    <div class="form-group">
                      <label>VAT REGISTRAION NO.</label>
                      <input type="text" id="vatno" name="vatno" class="form-control" required>
                    </div>
                    <div class="form-group">
                      <label>NAME</label>
                      <input type="text" id="name" name="name" class="form-control" required>
                    </div>
                    <div class="form-group">
                      <label>ADDRESS</label>
                      <input type="textarear" rows="4" cols="50" id="address" name="address" class="form-control" required>
                    </div>
                    <div class="form-group">
                      <label>PHONE</label>
                      <input type="phone" id="phone" name="phone" class="form-control" required>
                    </div>
                    <div class="form-group">
                      <label>EMAIL</label>
                      <input type="email" id="email" name="email" class="form-control" required>
                    </div>
                    <div class="form-group">
                      <label>CONTACT PERSON</label>
                      <input type="text" id="person" name="person" class="form-control" required>
                    </div>
                  </div>
                  <div class="modal-footer">
                    <input type="hidden" value="1" name="type">
                    <input type="button" class="btn btn-default" data-dismiss="modal" value="Cancel">
                    <button type="button" class="btn btn-success" id="btn-add">Add</button>
                  </div>
                </form>
              </div>
            </div>
          </div>
          <!-- Edit Modal HTML -->
          <div id="editClientModal" class="modal fade">
            <div class="modal-dialog">
              <div class="modal-content">
                <form id="update_form">
                  <div class="modal-header">
                    <h4 class="modal-title">Edit User</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                  </div>
                  <div class="modal-body">
                    <input type="hidden" id="id_u" name="id" class="form-control" required>
                    <div class="form-group">
                      <label>Code</label>
                      <input type="text" id="code_u" name="code" class="form-control" required>
                    </div>
                    <div class="form-group">
                      <label>Buiness Registration No.</label>
                      <input type="text" id="regno_u" name="regno" class="form-control" required>
                    </div>
                    <div class="form-group">
                      <label>VAT Registration No.</label>
                      <input type="text" id="vatno_u" name="vatno" class="form-control" required>
                    </div>
                    <div class="form-group">
                      <label>Name</label>
                      <input type="text" id="name_u" name="name" class="form-control" required>
                    </div>
                    <div class="form-group">
                      <label>Address</label>
                      <input type="address" id="address_u" name="address" class="form-control" required>
                    </div>
                    <div class="form-group">
                      <label>Phone No.</label>
                      <input type="phone" id="phone_u" name="phone" class="form-control" required>
                    </div>
                    <div class="form-group">
                      <label>Email</label>
                      <input type="email" id="email_u" name="email" class="form-control" required>
                    </div>
                    <div class="form-group">
                      <label>Contact Person</label>
                      <input type="text" id="person_u" name="person" class="form-control" required>
                    </div>
                  </div>
                  <div class="modal-footer">
                    <input type="hidden" value="2" name="type">
                    <input type="button" class="btn btn-default" data-dismiss="modal" value="Cancel">
                    <button type="button" class="btn btn-info" id="update">Update</button>
                  </div>
                </form>
              </div>
            </div>
          </div>
          <!-- Delete Modal HTML -->
          <div id="deleteClientModal" class="modal fade">
            <div class="modal-dialog">
              <div class="modal-content">
                <form>
                  <div class="modal-header">
                    <h4 class="modal-title">Delete User</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                  </div>
                  <div class="modal-body">
                    <input type="hidden" id="id_d" name="idd" class="form-control">
                    <p>Are you sure you want to delete these Records?</p>
                    <p class="text-warning"><small>This action cannot be undone.</small></p>
                  </div>
                  <div class="modal-footer">
                    <input type="button" class="btn btn-default" data-dismiss="modal" value="Cancel">
                    <button type="button" class="btn btn-danger" id="delete">Delete</button>
                  </div>
                </form>
              </div>
            </div>
          </div>
          <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
          <script type="text/javascript" src=" https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
          <script type="text/javascript" src="https://cdn.datatables.net/1.10.24/js/dataTables.bootstrap5.min.js"></script>
          <style>
            .pagination {
              float: right;
              text-align: right;
            }

            .pagination .page-item.active .page-link {
              background-color: #0A2558;
            }

            div.dataTables_wrapper div.dataTables_paginate ul.pagination .page-item.active .page-link:focus {
              background-color: #0A2558;
            }

            .pagination .page-item.active .page-link:hover {
              background-color: #0A2558;
            }

            .content-table {
              border-collapse: collapse;
              margin: 5px 0;
              font-size: 0.9em;
              min-width: 400px;
              border-radius: 5px 5px 0 0;
              overflow: hidden;
              box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
            }

            .content-table thead tr {
              background-color: #0A2558;
              color: #ffffff;
              text-align: left;
              font-weight: bold;
            }

            .content-table th,
            .content-table td {
              padding: 8px 8px;
            }

            .content-table tbody tr {
              border-bottom: 1px solid #dddddd;
            }

            .content-table tbody tr:nth-of-type(even) {
              background-color: #f3f3f3;
            }

            .content-table tbody tr:last-of-type {
              border-bottom: 2px solid #009879;
            }

            .content-table tbody tr.active-row {
              font-weight: bold;
              color: #009879;
            }

            .dataTables_filter {
              float: right;
              text-align: right;
            }
          </style>
          <script>
            $(document).ready(function() {
              $('#example').DataTable();
            });
          </script>
</body>

</html>

//MY SAVE PHP
<?php
include 'database.php';

if(count($_POST)>0){
    if($_POST['type']==1){
        $code=$_POST['code'];
        $regno=$_POST['regno'];
        $vatno=$_POST['vatno'];
        $name=$_POST['name'];
        $address=$_POST['address'];
        $phone=$_POST['phone'];
        $email=$_POST['email'];
        $person=$_POST['person'];
        
        $sql = "INSERT INTO `tbl_client`( `code`, `regno`, `vatno`, `name`, `address`, `phone`, `email`,`person`) 
        VALUES ('$code','$regno','$vatno','$name','$address','$phone','$email','$person')";
        if (mysqli_query($conn, $sql)) {
            echo json_encode(array("statusCode"=>200));
        } 
        else {
            echo "Error: " . $sql . "<br>" . mysqli_error($conn);
        }
        mysqli_close($conn);
    }
}
if(count($_POST)>0){
    if($_POST['type']==2){
        $id=$_POST['id'];
        $code=$_POST['code'];
        $regno=$_POST['regno'];
        $vatno=$_POST['vatno'];
        $name=$_POST['name'];
        $address=$_POST['address'];
        $phone=$_POST['phone'];
        $email=$_POST['email'];
        $person=$_POST['person'];

        $sql = "UPDATE `tbl_client` SET `code`='$code',`regno`='$regno',`vatno`='$vatno',`name`='$name',`address`='$address', `phone`='$phone', `email`='$email', `person`='$person' WHERE id=$id";
        if (mysqli_query($conn, $sql)) {
            echo json_encode(array("statusCode"=>200));
        } 
        else {
            echo "Error: " . $sql . "<br>" . mysqli_error($conn);
        }
        mysqli_close($conn);
    }
}
if(count($_POST)>0){
    if($_POST['type']==3){
        $idd=$_POST['id'];
        $sql = "DELETE FROM `tbl_client` WHERE id=$idd ";
        if (mysqli_query($conn, $sql)) {
            echo $idd;
        } 
        else {
            echo "Error: " . $sql . "<br>" . mysqli_error($conn);
        }
        mysqli_close($conn);
    }
}


?>

共有1个答案

潘意
2023-03-14

检查所有引导数据属性，确保它们都使用数据bs前缀。我在你的代码中发现了一些没有它的代码。在引导程序5中，引导程序属性应该包含要正确执行的数据B，而不是数据。

如果您是从bootstrap 4迁移，请检查此处的迁移更改列表。

 类似资料：
  • 成功调用AJAX时弹出Bootstrap模式

    问题内容： 我使用Formkeep制作表单，使用AJAX向其服务器提交电子邮件。我遇到的问题是，如何使用AJAX成功发送电子邮件地址时弹出一个引导模式，说“谢谢”。 这是运行AJAX的脚本。 我是AJAX请求的初学者，因此将非常感谢您的帮助。 谢谢 问题答案： 完成回叫后，添加： 并确保您的模态具有类似的属性：

  • AJAX成功后如何关闭模式窗口

    问题内容： 我有一个打开模态的按钮，但是我通过单击背景或ESC键来阻止模态关闭。 我的按钮如下所示： 使用jQuery成功后，如何关闭此模式？ 我已经进行了一些测试-模式已关闭但背景已锁定，在刷新页面之前我无法做任何事情 问题答案： 要关闭引导程序模态，您可以按以下方式将“ hide”作为选项传递给模态方法。 在ajax成功内部使用此代码。 小提琴演示

  • 从AJAX循环JSON数据成功吗？

    我从PHP页面收到一个Json输出，如下所示 null null 我如何循环结果，这样我就可以访问每个元素了？我已经尝试了类似下面的东西，但这似乎不起作用。 null null

  • Ajax成功：数据长度未定义

    为什么我在数据中没有定义。ajax中的长度。成功了？ 以下是代码，为了简洁起见，删除了一些部分：

  • Jquery Ajax xmlhttp请求成功问题

    本文向大家介绍Jquery Ajax xmlhttp请求成功问题，包括了Jquery Ajax xmlhttp请求成功问题的使用技巧和注意事项，需要的朋友参考一下 今天遇到了一个极其奇怪的问题，用各种工具检查都能看到服务器端返回了200，数据也是正常的，但是$.ajax 始终进不到success，郁闷啊，在网上找， 常见问题场景： 1.跨域； 2. $.ajax 没设置 dataType，及服务器

  • 如何从ajax成功函数返回数据？

    问题内容： 在我的前端JavaScript应用程序中，我发出了ajax请求以从服务器获取数据。一旦获得数据，我想将该信息返回给视图。 我该怎么做？ 问题答案： 而不是从：返回来传递给函数。

相关问答

Bootstrap模式使用ajax和Foreach的问题使用Ajax从Spring Controller以模式加载数据从yii2 ActiveForm保存数据后无法显示成功消息（在模式中）根据json中的数据量在ajax成功函数中动态创建多个div返回AJAX成功和错误

相关文章

jQuery AJAX成功jQuery：在ajax调用成功之后返回数据成功调用ajax后，数据表不会更新ASP.NET：jQuery AJAX'数据'参数问题如何访问ajax成功回调函数中的$（this）

相关阅读

AJAX安全问题Cassandra数据模型MongoDB数据模型数据开发笔试问题VB.Net数据库访问

相关工具

开源数据访问组件DAC标准TVL格式数据解析模仿看图猜成语设计模式Java版Quartz 表达式生成器

相关文档

JavaScript 模式设计模式Java 设计模式PHP 设计模式Java 设计模式
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.