使用 sql 从 table 行点击填充 Bootstrap 模态

Question

我整个星期都在研究这个，最后放弃了，决定直接问。我所拥有的是 bootstrap table 中的空缺职位列表，该列表是通过 mysql 查询填充的。单击一行时，会出现一个模型，显示作业的详细信息。 UI 工作完美，但现在我已经尝试获取正确的数据以在模态中显示，我不知所措。

根据我的阅读，解决方案似乎是使用 AJAX，我对它的经验为零。如果我需要我的模态信息、sql 查询或两者都在单独的页面上，我似乎无法通过阅读其他解决方案和教程来弄清楚。这是我的初始代码：

jobs.php

<table class="table table-hover" data-link="row">
        <thead>
        <tr>
            <th>Job #</th>

            <th>Quote #</th>

            <th>Date Started</th>

            <th>Customer Name</th>

            <th>Description</th>

            <th>Amount</th>

            <th>Date Completed</th>

        </tr>
        </thead>
        <tbody>
            <?php
                while ($row = mysqli_fetch_array($jobs)) {
                    // Print out the contents of the entry
                    echo '<tr>';
                    echo '<td><a href="" data-toggle="modal" data-target="#jobModal" ></a>' . $row['id'] . '</td>';
                    echo '<td>' . $row['quote'] . '</td>';
                    echo '<td>' . $row['started'] . '</td>';
                    echo '<td>' . $row['customer'] . '</td>';
                    echo '<td>' . $row['description'] . '</td>';
                    echo '<td>$' . $row['amt'] . '</td>';
                    echo '<td>' . $row['status'] . '</td>';
                    echo '</tr>';
                }
            ?>
        </tbody>
    </table>

Modal - 同样在 jobs.php 中（忽略占位符，当我开始工作时它们将被 php 变量替换）

<div class="modal fade" id="jobModal" tabindex="-1" role="dialog" aria-labelledby="jobModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <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="jobModalLabel"><strong>Job <?php echo $row['id']; ?></strong></h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-lg-2">
                            Quote #
                        </div>
                        <div class="col-lg-2">
                            PO # 1234567
                        </div>
                        <div class="col-lg-4">
                            Status: In Progress
                        </div>
                        <div class="col-lg-4 text-right">
                            Customer Name
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-4">
                            <br/>
                            Started: 03/01/2015
                        </div>
                        <div class="col-lg-4">
                            <br/>
                            Completed:
                        </div>
                        <div class="col-lg-4 text-right">
                            Primary Contact
                        </div>
                    </div>
                    <hr>
                    <div class="row">
                        <div class="col-lg-6 text-center">
                            <strong>PUMP SPECS</strong><br/><br/>
                        </div>
                        <div class="col-lg-6 text-center">
                            <strong>MOTOR SPECS</strong>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-3">
                            Mfg: Taco
                            <br/><br/>
                            Size: 6x4
                        </div>
                        <div class="col-lg-3">
                            Mod: 54654856daf5
                            <br/><br/>
                            S/N: 54654856daf5
                        </div>
                        <div class="col-lg-2 border-left">
                            Mfg: Baldor
                            <br/><br/>
                            Frame: 215T
                        </div>
                        <div class="col-lg-2">
                            HP: 50
                            <br/><br/>
                            Encl: TEFC
                        </div>
                        <div class="col-lg-2">
                            RPM: 1800
                            <br/><br/>
                            Volts: 100
                        </div>
                    </div>
                    <div class="row"></div>
                    <div class="col-lg-2 col-lg-offset-6 border-left">
                        <br/>
                        Amps: 240/360
                    </div>
                    <div class="col-lg-4">
                        <br/>
                        S/N: 54654856daf5
                    </div>
                    <hr>
                    <div class="row">
                        <div class="col-lg-12">
                            <strong>Job Description:</strong>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Edit Job</button>
                </div>
            </div>
        </div>
    </div>

从这一点来看，我是否可以通过模态端获取 id，这样我就可以使用 php 填写其余信息，就像我对原始 [=38= 所做的那样]？如果我确实需要使用 ajax，那么正确的做法是什么？

Answer 1

[已编辑]

如果你试试这个呢？

TABLE 打开模式

<?php
    while ($row = mysqli_fetch_array($jobs)) {
        // Print out the contents of the entry
        echo '<tr>';
        echo '<td><a href="#" data-toggle="modal" data-target="#jobModal'.$row['id'].'" >Click here to edit</a>' . $row['id'] . '</td>';
        echo '<td>' . $row['quote'] . '</td>';
        echo '<td>' . $row['started'] . '</td>';
        echo '<td>' . $row['customer'] . '</td>';
        echo '<td>' . $row['description'] . '</td>';
        echo '<td>$' . $row['amt'] . '</td>';
        echo '<td>' . $row['status'] . '</td>';
        echo '</tr>';
    }
?>

模式

<?php while ($row = mysqli_fetch_array($jobs)) { ?>
    <div class="modal fade" id="jobModal<?php echo $row['id']; ?>" tabindex="-1" role="dialog" aria-labelledby="jobModalLabel<?php echo $row['id']; ?>" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <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="jobModalLabel<?php echo $row['id']; ?>"><strong>Job <?php echo $row['id']; ?></strong></h4>
                </div>
                <div class="modal-body">
                    ...
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Edit Job</button>
                </div>
            </div>
        </div>
    </div>
<?php } ?>

使用 sql 从 table 行点击填充 Bootstrap 模态

Populating Bootstrap modal w/ sql from table row click

php

mysql

ajax

twitter-bootstrap

bootstrap-modal