如何在引导模式中加载动态内容

Question

我已经创建了一个引导模式，但我需要内容是动态的。每次我选择一个不同的表格行时，该行的内容应该弹出。 bootstrap modal 中的内容是一个动态表。可以显示一个简单示例，说明如何通过从表格的行中进行选择，我可以在弹出模式中获得动态表格。请帮忙。谢谢

  while($row = $results->fetch_assoc()): ?>
       <tr>
         <td class="list-answer"
               data-toggle="modal"
               href="#content-confirmation">
                <?= $row["name"]; ?>
           </td>
        </tr>
  <?php endwhile ?>

 <div class="control-popup modal fade" id="content-confirmation"
 tabindex="-1" role="dialog">
<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">Are you sure you wanna do
            that?</h4>
        </div>
        <div class="modal-body">
          load dynamic table content.......

        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default"
            data-dismiss="modal">Cancel</button>
            <button type="button" class="btn btn-primary"
            data-dismiss="modal">Save</button>
        </div>
    </div>
</div>

原文由 tan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您是否正在尝试为您的表列提供 href 链接？因为它不会那样工作。

对于您的问题，有多种方法可以做到这一点。我会给表的行一个id，并在js代码中处理行点击或列点击事件。之后，我将通过 ajax 请求或直接从表的列中获取行内容。

所以你的代码看起来像：

  while($row = $results->fetch_assoc()): ?>
   <tr data-id="<?= $row["id"]; ?>">
     <td class="list-answer">
            <?= $row["name"]; ?>
       </td>
    </tr>

你的javascript代码：

 $(function(){
$(".list-answer").click(function() {
    var row_id = $(this).parents('tr').attr('data-id');

    get_data(row_id);

    $('#my-modal').modal();
});
});

function get_data(row_id) {

    //either get data with ajax request or row
    //fill modals content with $('#input-field-id').val('vlaue') or .html()
}

原文由 Mightee 发布，翻译遵循 CC BY-SA 3.0 许可协议