在foreach循环中加载模式弹出窗口 [英] Load modal pop up in foreach loop

问题描述

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

I have a query that retrieves multiple rows from the database. A column in the query is notes, I want to show that in a modal pop up.

我可以在foreach循环中将其设置为为每行加载一个模式，但这将意味着x数量的模式，具体取决于行数.

I can within the foreach loop set it to load one modal for each row, but that will mean x amounts of modals depending on the number of rows.

是否有一种方法可以加载一个模态并将值(从DB)传递给该模态，所以我不必具有那么多模态.

Is there a way to load one modal and pass a value (from DB) to that so I don't have to have so many modals.

这里是我尝试过的内容，但就像我说的那样，它为每一行创建了一个模式:

Heres what I have tried but like I say its creating a modal for each row:

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传递给它?

Is there a way to overcome this and just create one modal and then pass the $id to it?

推荐答案

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

You should have one static modal, and change its contents via javascript on a link click for example in each row. You can gather notes into a JS object with your IDs as fields. Then you can refer to an actual ID in your popup link with the data-* attribute. Then handle the click of each link, fetch the notes, put them into your modal body, and show the modal.

<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错误.

Sorry, code is not tested, but should give you the idea. Also note that while this technique works, it's far from the most elegant and precise way. For example you should consider some escaping not to cause szntax error in the constructed javascript object.

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

Another good solution is to create a hidden DIV in your loop, which contains the notes. Then zou can extract the notes from that in your event handler with basically the same techniques.

这篇关于在foreach循环中加载模式弹出窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！