模式内的充电信息（引导程序 3.3.6）？

Question

我有一个模式，点击 Visualizar 选项后，我希望它从table 加载信息。

但是，它只加载第一个表 ID，而不管我要查看表的哪个项目。它总是显示相同的信息。

下面是我正在使用的代码。

<div class="container-fluid">
<table class="table table-striped" data-toggle="table"
       data-search="true"
       data-show-refresh="true"
       data-show-columns="true">
    <thead>
        <tr>
            <th class="th-small" data-align="left" data-sortable="true">ID</th>
            <th data-align="left" data-sortable="true">Nome</th>
            <th class="th-small">Ações</th>
        </tr>
    </thead>
    <tbody>
        <?php
        foreach ($idade as $key => $v) {
            ?>
            <tr>

                <td><?= $v->id ?></td>
                <td><?= $v->titulo ?></td>
                <td>
                    <form data-toggle="validator" method="POST" enctype="multipart/form-data">
                    <div class="dropdown">
                        <button class="btn btn-default dropdown-toggle" type="submit" data-toggle="dropdown">... <span class="caret"></span></button>
                        <ul class="table-modal dropdown-menu">
                            <li class=""><a data-toggle="modal" data-target="#modal-select">Visualizar</a></li>
                            <li><a data-toggle="modal" data-target="#editarIdade">Editar</a></li>
                        </ul>
                    </div>
                </td>
            </tr>
        <?php } ?>
    </tbody>
</table>

<!-- Modal VISUALIZAR -->
<div class="modal fade" id="modal-select" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="cadastroIdadelLabel">Visualizar - Idade</h4>
            </div>
            <div class="modal-body">
                <form class="form-inline" role="form" data-toggle="validator" action="Idade/page/visualizar">
                    <fieldset>
                        <div class="form-group">
                            <div>
                                <label>Idade:</label>
                                <?= $v->titulo ?>

                            </div>
                            <div>
                                <label>Código:</label>
                                <?= $v->id ?>
                            </div>

                        </div>
                    </fieldset>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Voltar</button>

            </div>
            </form>
        </div>
    </div>
</div>

谁能帮我找到问题？

Answer 1

首先，您在foreach 代码中打开了<form> 标签（旁注：他在这里不需要表单）

<?php foreach ($idade as $key => $v) {?>
    <tr>
        <td><?= $v->id ?></td>
        <td><?= $v->titulo ?></td>
        <td>
            <form data-toggle="validator" method="POST" enctype="multipart/form-data">
            <div class="dropdown">
                <button class="btn btn-default dropdown-toggle" type="submit" data-toggle="dropdown">... <span class="caret"></span></button>
                <ul class="table-modal dropdown-menu">
                    <li class=""><a data-toggle="modal" data-target="#modal-select">Visualizar</a></li>
                    <li><a data-toggle="modal" data-target="#editarIdade">Editar</a></li>
                </ul>
            </div>
            </form>
        </td>
    </tr>
<?php } ?>

其次，您必须在 Modal 内部的 modal-body 之前放置 <form> 标记（旁注：<?= $v->titulo ?> 和 <?= $v->id ?> 不会在 foreach 之外显示任何值

<div class="modal fade" id="modal-select" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="cadastroIdadelLabel">Visualizar - Idade</h4>
            </div>
            <form class="form-inline" role="form" data-toggle="validator" action="Idade/page/visualizar">
            <div class="modal-body">
                    <fieldset>
                        <div class="form-group">
                            <div>
                                <label>Idade:</label>
                                <?= $v->titulo ?>

                            </div>
                            <div>
                                <label>Código:</label>
                                <?= $v->id ?>
                            </div>

                        </div>
                    </fieldset>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Voltar</button>
            </div>
            </form>
        </div>
    </div>
</div>

第三，您必须将 id <?= $v->id ?> 作为数据属性 data-id="<?= $v->id ?>" 添加到模态触发按钮并使用 BS Modal 事件，当模态显示时将其传递给模态

<li class=""><a data-id="<?= $v->id ?>" data-toggle="modal" data-target="#modal-select">Visualizar</a></li>

模态表演活动。

$(document).ready(function(){
    $('#modal-select').on('show.bs.modal', function (e) {
        var id = $(e.relatedTarget).data('id');
        alert(id);
        //pass `id` to input, HTML selector do what ever you like with it
     });
});

第四，要从数据库中获取id 的数据并以模式显示，请查看此answer。

您可以询问是否需要更多解释或任何步骤的帮助。