Question

我有一个从数据库中检索多行的查询。查询中的一列是注释，我想在模式弹出窗口中显示它。

我可以在foreach循环中设置它为每一行加载一个模态，但这意味着x个模态的数量取决于行数。

有没有办法加载一个模态并传递一个值（从DB），所以我没有这么多的模态。

继承了我的尝试，但就像我说它为每一行创建一个模态：

foreach($data as $row) { $id = $row['id']; ?>
<div class="modal fade" id="myModalnote<?php echo id;?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;
                </button>
                <h4 class="modal-title" id="myModalLabelnote">Notes</h4>
            </div>
            <div class="modal-body">
                <?php 
                    $data = $conn->query('SELECT * FROM notes WHERE id = '.$id); 
                        foreach($data as $row) { 
                            echo '<p>'.$row['note'].'</p>';
                        }
                ?>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->
}

有没有办法克服这个问题，只需创建一个模态，然后将$ id传递给它？

Answer 1

你应该有一个静态模态，并通过链接点击例如在每一行中通过javascript更改其内容。您可以使用ID作为字段将注释收集到JS对象中。然后，您可以使用data- *属性在弹出链接中引用实际ID。然后处理每个链接的点击，获取笔记，将它们放入模态体中，并显示模态。

<div class="modal fade" id="myModalnote" tabindex="-1" 
role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabelnote">Notes</h4>
      </div>
      <div class="modal-body">
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<script>
  var notes = {};

<?php
  $data = $conn->query('SELECT * FROM notes WHERE id = '.$id);
  foreach($data as $row) {
    echo 'notes["'.$row['id'].'"] = "'.$row['notes'].'";';
  }
?>

$(document).on("click", ".noteslink", function() {
  var id = $(this).data("rowid");
  $("#myModalnote .modal-body").html(notes[id]);
  $("#myModalnote").modal("show");
});

</script>

<?php
  foreach($data as $row) {
    echo '<a class="noteslink" data-rowid="'.$row['id'].'">Show note for '.$row['id'].'</a>';
  }
?>

对不起，代码没有经过测试，但应该给你一个想法。另请注意，虽然这种技术有效，但它远非最优雅和精确的方式。例如，你应该考虑一些转义，不要在构造的javascript对象中导致szntax错误。

另一个好的解决方案是在循环中创建一个隐藏的DIV，其中包含注释。然后，你可以使用基本相同的技术从事件处理程序中提取笔记。

Answer 2

我已尝试过该代码但获取未定义的注释[id]。我们也可以在内部循环中创建popup并为打开弹出窗口创建动态id，但这可能是一个冗长的方法。

在foreach循环中弹出加载模式

2 个答案: