Question

我有一个代码，可以通过ajax / json将数据从数据库弹出到模态弹出，成功获取数据。但我无法展示我的模态。继承我的代码。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link rel="stylesheet" href="css/w3.css">
<!-- Scripts -->
<script src="js/jquery-3.2.1.slim.min.js" crossorigin="anonymous"></script>

<script src="js/jquery-3.2.1.js" crossorigin="anonymous"></script>
<script src="js/popper.min.js"  crossorigin="anonymous"></script>
<script src="js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<!-- Scripts -->
<script type="text/javascript">  

//Start Update Function
function GetUserDetails(EmployeesID) {
    // Add User ID to the hidden field for furture usage
    $("#hidden_user_id").val(EmployeesID);
    $.post("ajax/readUserDetails.php", {
            EmployeesID: EmployeesID
        },
        function (data, status) {
            // PARSE json data
            var tblinfo = JSON.parse(data);
            // Assing existing values to the modal popup fields
            $("#update_first_name").val(tblinfo.firstname);
            $("#update_last_name").val(tblinfo.lastname);
            $("#update_basic_salary").val(tblinfo.basicsalary);
          }
    );
    // Show Modal
 $("#update_user_modal").modal("show");
}
//End Update Function

body{
  background-color:#e9ecef;
}
</style>
</head>
<body>
<div class="topd">
<h1>Welcome to HopesV2.0</h1>
</div>
<nav class="navbar navbar-expand-lg navbar-light w3-teal" data-spy="affix" data-offset-top="197">
  <a class="navbar-brand" href="#"></a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <div class="navbar-nav">
    <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        HR
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <a class="nav-item nav-link" href="#">Features</a>
      <a class="nav-item nav-link" href="#">Pricing</a>
            <a class="nav-item nav-link" href="first.php" onclick="return confirm('Are you want to exit?')">Logout</a>
    </div>
  </div>
</nav>
<BR>
<!-- Start Body -->
<div class="jumbotron zbody">
  <h1>Basic Information</h1>
  <hr class="my-4">
<p class="lead">
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">

<!-- Modal - Update User details -->
<div class="modal fade" id="updateusermodal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Update</h4>
            </div>
            <div class="modal-body">

                <div class="form-group">
                    <label for="update_first_name">First Name</label>
                    <input type="text" id="update_first_name" placeholder="First Name" class="form-control"/>
                </div>

                <div class="form-group">
                    <label for="update_last_name">Last Name</label>
                    <input type="text" id="update_last_name" placeholder="Last Name" class="form-control"/>
                </div>

                <div class="form-group">
                    <label for="update_basic_salary">Basic Salary</label>
                    <input type="text" id="update_basic_salary" placeholder="Basic Salary" class="form-control"/>
                </div>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" onclick="UpdateUserDetails()" >Save Changes</button>
                <input type="hidden" id="hidden_user_id">
            </div>
        </div>
    </div>
</div>
<!-- // Modal -->

<div class="row">
<div class="col-md-12">
<h4>Records:</h4>
<div class="records_content"></div>
</div>

</form>
  </p>
</div>
<!-- End Body -->  
</body>
</html>

继承人我的readuserdetails.php

<?php
// include Database connection file
include("myconnection.php");

// check request
if(isset($_POST['EmployeesID']) && isset($_POST['EmployeesID']) != "")
{
    // get User ID
    $EmployeesID = $_POST['EmployeesID'];

    // Get User Details
    $query = "SELECT * FROM tblinfo WHERE EmployeesID = '$EmployeesID'";
    if (!$result = mysqli_query($con, $query)) {
        exit(mysqli_error($con));
    }
    $response = array();
    if(mysqli_num_rows($result) > 0) {
        while ($row = mysqli_fetch_assoc($result)) {
            $response = $row;
        }
    }
    else
    {
        $response['status'] = 200;
        $response['message'] = "Data not found!";
    }
    // display JSON data
    echo json_encode($response);
}
else
{
    $response['status'] = 200;
    $response['message'] = "Invalid Request!";
}

和我将数据填充到表中的代码：

<?php
    // include Database connection file 
    include("myconnection.php");

    // Design initial table header 
    $data = '<table class="table table-bordered table-striped">
                        <tr>
                            <th>No.</th>
                            <th>First Name</th>
                            <th>Last Name</th>
                            <th>Basic Salary</th>
                            <th>Update</th>
                            <th>Delete</th>
                        </tr>';

    $query = "SELECT * FROM tblinfo";

    if (!$result = mysqli_query($con, $query)) {
        exit(mysqli_error($con));
    }

    // if query results contains rows then featch those rows 
    if(mysqli_num_rows($result) > 0)
    {
        $number = 1;
        while($row = mysqli_fetch_assoc($result))
        {
            $data .= '<tr>
                <td>'.$number.'</td>
                <td>'.$row['firstname'].'</td>
                <td>'.$row['lastname'].'</td>
                <td>'.$row['basicsalary'].'</td>
                <td>
                    <button onclick="GetUserDetails('.$row['EmployeesID'].')" class="btn btn-warning">Update</button>
                </td>
                <td>
                    <button onclick="DeleteUser('.$row['EmployeesID'].')" class="btn btn-danger">Delete</button>
                </td>
            </tr>';
            $number++;
        }
    }
    else
    {
        // records now found 
        $data .= '<tr><td colspan="6">Records not found!</td></tr>';
    }

    $data .= '</table>';

    echo $data;
?>

我尝试显示我通过警报（数据）获取的数据，并显示我已经从我的数据库中获取数据。我只是不明白为什么引导模式没有显示。它就像重新加载页面一样。

Answer 1

在AJAX完成后打开你的模态，内容附加在模态中，你的id不正确，应该是updateusermodal

function (data, status) {
  // PARSE json data
  var tblinfo = JSON.parse(data);
  // Assing existing values to the modal popup fields
  $("#update_first_name").val(tblinfo.firstname);
  $("#update_last_name").val(tblinfo.lastname);
  $("#update_basic_salary").val(tblinfo.basicsalary);
  $("#updateusermodal").modal("show");
}

将您的onclick事件更改为onclick="GetUserDetails(EmployeesID,event)"

阻止默认点击您的功能：

 function GetUserDetails(EmployeesID,event) {
    event.preventDefault()

Bootstrap Modal不是Woking

1 个答案: