Question

我有一个包含数据行和操作按钮的数据表。我希望当我点击该行动数据时，该行数据从数据库加载并以模态显示。我试图用ajax和php做这个，但根本没有成功。

以下是我的代码，以澄清我的问题：

JS

<script type="text/javascript">
$(document).ready(function(){

 $(document).on('click', '#getDetails', function(e){

  e.preventDefault();

  var uid = $(this).data('id'); // get id of clicked row

  $('#dynamic-content').hide(); // hide dive for loader
  $('#modal-loader').show();  // load ajax loader

  $.ajax({
      url: 'ajax_modal_view.php',
      type: 'POST',
      data: 'id='+uid,
      dataType: 'json'
  })
  .done(function(data){
      console.log(data);
      $('#dynamic-content').hide(); // hide dynamic div
      $('#dynamic-content').show(); // show dynamic div
      $('#txt_fname').html(data.fname);
      $('#txt_lname').html(data.lname);
      $('#txt_email').html(data.email);
      $('#txt_disability').html(data.disability);
      $('#txt_id').html(data.national_id);
      $('#modal-loader').hide();    // hide ajax loader
  })
  .fail(function(){
      $('.modal-body').html('<i class="glyphicon glyphicon-info-sign"></i> Something went wrong, Please try again...');
  });

 });

});
</script>

HTML Datatable

<table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-hover table-bordered dt-responsive nowrap" id="example">

                        <thead>
                        <tr>


                    <th><input type="checkbox" id="checkall" /></th>
                    <th class="text-danger">Name</th>
                    <th class="text-danger">Gender</th>
                    <th class="text-danger">National id</th>
                    <th class="text-danger">Constituency</th>
                    <th class="text-danger">Institution Name</th>
                    <th class="text-danger">YOS</th>
                    <th class="text-danger">Action</th>




                </tr>
                </thead>
                <tbody>
                <?php $query= mysql_query("select * from application_details")or die(mysql_error());

                                    while ($row = mysql_fetch_array($query))
 {

                            ?>
                <tr>
                <td width="30">
                <input id="optionsCheckbox" class="uniform_on" name="selector[]" type="checkbox" value="<?php echo $row['application_id']; ?>">
                </td>


                <td><?php echo $row['fname']." ".$row['mname']." ".$row['lname']; ?></td>
                <td><?php echo $row['gender']; ?></td>
                <td><?php echo $row['national_id']; ?></td>
                <td><?php echo $row['constituency']; ?></td>        
                <td><?php echo $row['institution_name']; ?></td>
                <td><?php echo $row['year_of_study']; ?></td>
                 <td>
                <button data-toggle="modal" data-target="#view" data-id="<?php echo $row['application_id']; ?>" id="getDetails" class="btn btn-primary btn-xs"><i class="glyphicon glyphicon-eye-open"></i></button>

                 <a href="delete_record.php<?php echo '?id='.$row['application_id']; ?>" title="Delete" class="btn btn-danger btn-xs" data-title="Delete" data-toggle="modal" ><span class="glyphicon glyphicon-trash"></span></a>



                 </td>



                        </tr>
                        <?php } ?>
                        </tbody>

            </table>

ajax_modal_view.php

<?php

 header('Content-type: application/json; charset=UTF-8');

     require_once '../dbconnect/dbcon.php';

     if (isset($_POST['id']) && !empty($_POST['id'])) {

         $id = intval($_POST['id']);
         $query = "SELECT * FROM application_details WHERE application_id=:id";
         $stmt = $DBcon->prepare( $query ); 
         $stmt->execute(array(':id'=>$id));
         $row=$stmt->fetch(PDO::FETCH_ASSOC);       
         echo json_encode($row);
         exit; 
     }

  ?>

我不知道问题出在哪里，请有人帮忙，这已经困扰了我近一个星期了。提前谢谢

Answer 1

我已经解决了我的问题。问题在于数据库连接。

使用Ajax和php将数据加载到boostrap模式

1 个答案: