Question

我正在使用数据表插件，从那里我可以执行操作，用户可以在该行上更新或查看信息，该用户将使用我创建的Modal进行显示。但是，我似乎无法在单击它时查看该模式。 iv遍历了我的代码，阅读了一些文档，但是我看不到为什么显示Modal的原因。

我不确定它是否是由浏览器引起的，这在我在某处阅读时也可能是原因，但是在chrome和safari上均进行了iv测试，问题仍然存在。

非常感谢您的帮助：）

<div class = "container">
<table class = " display table" id="myTable" align="center" <table class="display nowrap" width="100%">
<thead>
<tr>
<th> Name </th>
<th> Driver </th>
<th> Date </th>
<th> Phone </th>
<th> From </th>
<th> To </th>
<th> Car </th>
<th> Email </th>
<th> Action </th>
</tr>
</thead>



<?php

require_once('bdd.php');
$sql = "select id, title, driver, start, phone, fromaddress, toaddress, cars, email  from events";

$projresult = $bdd->query($sql);
$projresult->setFetchMode(PDO::FETCH_ASSOC); ?>
<tbody>
<?php
while ( $row = $projresult->fetch() ) {?>
<tr id="<?php echo $row['id'];?>" >
            <td data-target="title"><?php echo $row['title']; ?></td>
            <td data-target="driver"><?php echo $row['driver']; ?></td>
            <td data-target="date"><?php echo $row['start']; ?></td>
            <td data-target="phone"><?php echo $row['phone']; ?></td>
            <td data-target="from"><?php echo $row['fromaddress']; ?></td>
            <td data-target="to"><?php echo $row['toaddress']; ?></td>
            <td data-target="cars"><?php echo $row['cars']; ?></td>
            <td data-target="email"><?php echo $row['email']; ?></td>
<td><a href="#" data-role="update" data-id="<?php echo $row['id'] ;?>">Update</a></td>
</tr>
<?php } ?>
</tbody>
</table>
</div>


<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
  <script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>

        <!-- Modal -->
        <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 Header</h4>
              </div>
              <div class="modal-body">
                  <div class="form-group">
                    <label>First Name</label>
                    <input type="text" id="title" class="form-control">
                  </div>
                  <div class="form-group">
                    <label>Last Name</label>
                    <input type="text" id="driver" class="form-control">
                  </div>

                   <div class="form-group">
                    <label>Email</label>
                    <input type="text" id="phone" class="form-control">
                  </div>
                    <input type="hidden" id="userId" class="form-control">


              </div>
              <div class="modal-footer">
                <a href="#" id="save" class="btn btn-primary pull-right">Update</a>
                <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
              </div>
            </div>

          </div>
        </div>




    <script>
      $(document).ready(function(){
        var table = $('#myTable').DataTable({"dom":"ftip"});



        //  append values in input fields
          $(document).on('click','a[data-role=update]',function(){
                var id  = $(this).data('id');
                var title  = $('#'+id).children('td[data-target=title]').text();
                var driver  = $('#'+id).children('td[data-target=driver]').text();
                var phone  = $('#'+id).children('td[data-target=phone]').text();

                $('#myModal #title').val(title);
                $('#myModal #driver').val(driver);
                $('#myModal #phone').val(phone);
                $('#myModal').modal('show');
          });
        });


 </script>

点击更新时无法显示模式

0 个答案: