使用作业信息创建动态模态弹出窗口

时间:2016-12-19 18:27:37

标签: php jquery twitter-bootstrap-3

我有一个PHP循环,可以从数据库中呈现结果:

<?php
foreach ($results as $result){
$job_numb = $result['job_numb'];
$job_name = $result['job_name'];
$comments = $result['comments'];
?>
   <tr>
        <td><?php echo "$job_numb";?> </td>
        <td><?php echo "$job_name";?></td>
        <td> <button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#Comments-<?php echo $job_numb;?>">Comments</button>

 <!-- Modal -->
      <div id="Comments-<?php echo $job_numb;?>" 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">Comments for <?php echo "$job_name" . "$job_numb";?></h4>
  </div>
  <div class="modal-body">
   <?php echo "$job_name";?>
    <?php echo "$comments";?>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  </div>
</div>

 </div>
 </div>
      </td>
      <td><a href="path-to-an-editfile/edit.php">Edit Record</a></td>
            </tr>
 <?php
     }
 ?>

模态的数据目标不能是STATIC ID,因为它在同一页面上重复ID - 因此您只需重复与ID的第一个实例相同的信息。

我所追求的是确保ID与所有记录的ID始终不同。我之前看过代码,但现在找不到了。我错过了什么?

1 个答案:

答案 0 :(得分:0)

使用<?php echo和唯一ID

创建唯一ID
<button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#Comments-<?php echo $job_numb;?>">Comments</button>

     <div id="Comments-<?php echo $job_numb;?>" class="modal fade" role="dialog">
     <div class="modal-dialog">
        <div class="modal-content">
        <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">&times;</button>
    <h4 class="modal-title">Comments for <?php echo "$job_name" . "&nbsp;|&nbsp;" . "$job_numb";?></h4>
  </div>
  <div class="modal-body">
    <?php echo "$comments";?>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  </div>
</div>

使用这个,我能够将所有动态行的特定数据传递给模态,而不会发生ID冲突。我希望这对寻求答案的其他人有用。