使用动态模态显示详细搜索结果

Question

我只是尝试使用模态来显示列出的商品的详细信息，但是当我单击模态按钮时，模态上没有任何内容。

这是包含模态按钮的列表

<div class="table-responsive">
  <table class="table table-bordered">
    <tr>
      <th class="text-center">NO</th>
      <th class="text-center">QR</th>
      <th class="text-center">Mat. No</th>
      <th class="text-center">Name</th>
      <th class="text-center">Unit</th>
      <th class="text-center">Detail</th>
    </tr>
    <?php
    include "connection.php";
    
      $param = '%'.$keyword.'%';
      
      $sql = $pdo->prepare("SELECT * FROM ERSAsp WHERE matno LIKE :matno OR name LIKE :name OR unit LIKE :unit");
      $sql->bindParam(':matno', $param);
      $sql->bindParam(':name', $param);
      $sql->bindParam(':unit', $param);
      $sql->execute(); 
    }
    else{ 
      $sql = $pdo->prepare("SELECT * FROM ERSAsp");
      $sql->execute();
    }
    
    $no = 1;
    while($data = $sql->fetch()){
    ?>
      <tr>
        <td class="align-middle text-center"><?php echo $no; ?></td>
        <td class="align-middle text-center">
          <img src="data/QR/<?php echo $data['QR']; ?>" width="80" height="80">
        </td>
        <td class="align-middle"><?php echo $data['matno']; ?></td>
        <td class="align-middle"><?php echo $data['name']; ?></td>
        <td class="align-middle"><?php echo $data['unit']; ?></td>
        <td class="align-middle text-center">
        <a href='#myModal' class='btn btn-default btn-small' data-id='<?php echo $data['matno']; ?>' data-toggle='modal'><span  class="glyphicon glyphicon-folder-open"></a>
        </td>
      </tr>
    <?php
      $no++; 
    }
    ?>
  </table>
  <!-- Modal pop up-->
    <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">Spare Part Detail</h4>
          </div>
          <div class="modal-body">
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>
</div>

这是加载detail.php以将数据从数据库卸载到模态的脚本

<script type="text/javascript">
    $(document).ready(function(){
        $('#myModal').on('show.bs.modal', function (e) {
            var matno = $(e.relatedTarget).data('matno');
            $.ajax({
                type : 'post',
                url : 'detail.php',
                data :  'matno='+ matno,
                success : function(data){
                $('.modal-body').html(data);
                }
            });
         });
    });
  </script>

这里是detail.php

<?php
    include "connection.php";

        $sql = $pdo->prepare("SELECT * FROM ERSAsp");
        $sql->execute();
        
        while($data = $sql->fetch()){
            ?>
            <table>
            <tr class="align-middle text-center">
                <img src="data/QR/<?php echo $data['QR']; ?>" width="200" height="200">
            </tr>
            <tr class="align-middle"><?php echo $data['sapcode']; ?></tr>
            <tr class="align-middle"><?php echo $data['sparepart']; ?></tr>
            <tr class="align-middle"><?php echo $data['unit']; ?></tr>
            <tr class="align-middle"><?php echo $data['manufacturer']; ?></tr>
            <tr class="align-middle"><?php echo $data['pn']; ?></tr>
            </table>
        <?php 

        }
?>

从搜索结果中，我需要基于mysql中的数据

matno

使用动态模式显示详细信息

Answer 1

使用这个：

<a href='#myModal' class='btn btn-default btn-small open-modal' data-matno='<?php echo $data['matno']; ?>' data-toggle='modal'>
    <span class="glyphicon glyphicon-folder-open"></span>
</a>

<script type="text/javascript">
    $(document).ready(function(){
        $('.open-modal').on('click', function () {
            var matno = $(this).data('matno');
            $.ajax({
                type : 'post',
                url : 'detail.php',
                data :  { matno: matno },
                success : function(data){
                    $('.modal-body').html(data);
                }
            });
        });
    });
</script>