Modal ajax

时间:2017-10-22 10:47:12

标签: php jquery ajax

我的问题是数据不会显示在模态文本字段中。我试图解决这个问题,而且我已经花了大部分时间来解决这个问题。我希望有人能帮助我解决这个问题。我真的很感激你的帮助。以下是用于我的模态的代码。

数据将显示在此处:

<table id="studentList">
  <tr>
    <th>Student ID</th>
    <th>Last Name</th>
    <th>First Name</th>
    <th>Course</th>
    <th>Year</th>
    <th>Home Address</th>
    <th>Contact</th>
    <th>Email</th>
    <th>Other</th>
  </tr>
  <?php while ($row = mysqli_fetch_assoc($res)) {
    echo '<tr>';
    foreach($row as $field) {
      echo '<td>' . htmlspecialchars($field) . '</td>';
  }?>
  <td><button type="button" name="view" class="btn btn-info btn-lg view-data" id="<?php echo $row['student_id']; ?>" data-toggle="modal" data-target="#myModal" style="margin:0; background-color: #1a8cff;">View More</button></td>
  <?php
   echo '</tr>';
  };?>
</table>

我的模态:

<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal </h4>
      </div>
      <div class="modal-body">
      <div id="add-student">
        <form method="POST">
          <input type="text" id="id" name="id" placeholder="Student ID" readonly/>
          <input type="text" id="lname" name="lname" placeholder="Last Name" readonly/>
          <input type="text" id="fname" name="fname" placeholder="First Name" readonly/>
          <select id="course" name="course" class="course" readonly>
            <option value="">Select Course</option>
            <option value="BEED">BEED</option>
            <option value="BSED">BSED</option>
          </select>
          <select id="year" name="year" class="year" readonly>
            <option value="">Year</option>
            <option value="1">1st</option>
            <option value="2">2nd</option>
          </select>
          <input type="text" id="address" name="address" placeholder="Address" readonly/>
          <input type="text" id="contact" name="contact" placeholder="Contact" readonly/>
          <input type="email" id="email" name="email" placeholder="Email" readonly/>
          <input type="submit" name="insert" id="insert" value="Insert">
          <br>
          <br>
        </form>
      </div>
    </div>
   <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  </div>
</div>

为模态分配值的脚本:

<script>
$(document).ready(function(){
    $(document).on('click', '.view_data', function(){
        var student_id = $(this).attr("id");
        $.ajax({
            url:"fetch.php";
            method:"POST",
            data:{student_id:student_id},
            dataType:"json",
            success:function(data){
                $('#id').val(data.id);
                $('#lname').val(data.fname);
                $('#fname').val(data.fname);
                $('#course').val(data.course);
                $('#year').val(data.year);
                $('#address').val(data.address);
                $('#contact').val(data.contact);
                $('#email').val(data.email);
                $('#insert').val("Update");
                $('#mymodal').modal('show');
            }
        });
    });
});
</script>

fetch.php

<?php
include_once '../../service/mysqlcon.php';

if(isset($_POST['student_id'])){
$query = "SELECT * FROM student WHERE student_id = 
'".$_POST["student_id"]."'";
$result = mysqli_query($conn, $query);
$row = mysqli_fetch_array($result);
echo json_encode($row);
}
?>

真的很感谢你的帮助!谢谢!

0 个答案:

没有答案