javascript - 如何使用模态引导从查询中正确访问php变量?

javascript - 如何使用模态引导从查询中正确访问php变量?,第1张

我有一个表,显示数据库中表的数据。它工作但我使用bootstrap并且我添加了一个模态元素,当我按下按钮时我得到了一个模型,其中包含我可以选择的项目列表,但我需要获取当前变量并且我不需要...知道发生了什么。如果我按下按钮,我会收到查询的第一项  javascript - 如何使用模态引导从查询中正确访问php变量?,enter image description here,第2张

        <?php
        $stmt = $pdo->prepare("SELECT nombre, descripcion, costo FROM tramite WHERE categoria = :categ");
        $result = $stmt->execute(array("categ"=>"tramites"));
    ?>

    <table class="table table-bordered">
        <tr>
            <td><b> Nombre</b> </td>
            <td><b> Descripción </b></td>
            <td><b> Costo </b></td>
            <td><b> Oficina(s) </b></td>
            <td><b> Requisito(s) </b></td>
        </tr>
        <?php
        if ($result = $stmt->fetch())
        {
            do{
        ?>
            <tr>
                <td> <?php echo utf8_encode($result['nombre']) . '<br>'; ?> </td>
                <td> <?php echo utf8_encode($result['descripcion']) . '<br>'; ?> </td>
                <td> <?php echo utf8_encode($result['costo']) . '<br>'; ?> </td>
                <?php
                    $nombre = $result['nombre']; // con esta variable consulto oficinas y requisitos
                    $stmtOficina = $pdo->prepare("SELECT oficina_nombreSitio FROM tramite_oficina WHERE tramite_nombre = :nombre");
                    $resultOficina = $stmtOficina->execute(array("nombre"=>$nombre));
                ?>
                <td> <?php do{ echo utf8_encode($resultOficina['oficina_nombreSitio']) . '<br><br>'; } while ($resultOficina = $stmtOficina->fetch());?>
                        <button type="button" data-toggle="modal" data-target="#exampleModal" data-whatever="<?php echo utf8_encode($nombre); ?>" class="btn btn-default btn-sm">
                            <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Añadir
                        </button>

                        <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                          <div class="modal-dialog">
                            <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="exampleModalLabel">Nuevo lugar</h4>
                              </div>
                              <div class="modal-body">
                                <form>
                                  <div class="form-group">
                                    <label for="recipient-name" class="control-label">Recipient:</label>
                                    <input type="text" class="form-control" id="recipient-name">
                                  </div>
                                  <div class="form-group">
                                      <select class="selectpicker">
                                        <option>Mustard</option>
                                        <option>Ketchup</option>
                                        <option>Relish</option>
                                      </select>
                                  </div>
                                  <div class="form-group">
                                  <?php echo utf8_encode($nombre); ?>
                                  </div>
                                </form>
                              </div>
                              <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
                                <button type="button" class="btn btn-primary">Guardar</button>
                              </div>
                            </div>
                          </div>
                        </div>                          

    <script>
        $('#exampleModal').on('show.bs.modal', function (event)
        {
            var button = $(event.relatedTarget) // Button that triggered the modal
            var recipient = button.data('whatever') // Extract info from data-* attributes
            // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
            // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
            var modal = $(this)
            modal.find('.modal-title').text('Nuevo lugar a '   recipient)
            modal.find('.modal-body input').val(recipient)

        })
    </script>

                </td>
                <td> null </td>
            </tr>
        <?php
                } while ($result = $stmt->fetch());
        }
        ?>

    </table>

最佳答案:

2 个答案:

答案 0 :(得分:1)

你的目标是id,这是个问题。 ID必须是页面唯一的,并且您在循环中创建了更多相同的ID。

将ID目标<button data-target="#exampleModal"更改为类目标data-target=".exampleModal"

然后<div class="modal fade" id="exampleModal"<div class="modal fade exampleModal"

请看example in bootstrap manual。

答案 1 :(得分:0)

您必须为数据库中的每个条目添加ID(如果您没有)。

然后,在循环中为每个条目创建模态。

do{
// Your table

// Button that opens modal

echo '<button type="button" data-toggle="modal" data-target="#' . $result['id']  . '" data-whatever="<?php echo utf8_encode($nombre); ?>" class="btn btn-default btn-sm">';

// Creating modal
echo '<div class="modal fade" id="' . $result['id'] . '" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">';

// Continue modal ....
}

因此,对于每个条目,我都会使用<ID>生成模态,您可以通过调用<ID>打开它。

本文经用户投稿或网站收集转载,如有侵权请联系本站。

发表评论

0条回复