php - 将 MySQL 数据导入到单个 Bootstrap 模态框中？

Question

我的最后一个问题取得了巨大的成功，我想我会尝试另一个。

我正在为我工​​作的公司(一家打印厂)构建一个“仪表板”。该仪表板将列出当前所有正在进行的工作、已完成的工作等(这确实会让每个人的生活变得更好)。

我使用 PHP 查询从 MySQL 数据库中提取所有客户信息，并使用 PHP while 循环将其显示到数据表中。我在每行末尾都有一个编辑按钮，用于打开一个模态框，显示并允许打印机输入信息并更新数据库。

这是有效的，但我开始思考...只有少数客户插入时一切都很好，但是一旦我们有 1,000 多个客户，每个客户都有一个模态框(来自 PHP while 循环)，它将变得势不可挡。

如果可能的话，任何人都可以向我解释一下，在页面上有一个模态框代码，当单击链接并启动该框时，该代码会将准确的客户数据拉入其中。

启动模态框的按钮(这是在 PHP while 循环中):

<a class=\"btn btn-info\" data-toggle=\"modal\" data-target=\"#modal_id\"
href=\"display=" . $row['id'] . "\">
<i class=\"icon-question-sign icon-white\"></i>  
</a>

模态代码本身(不在 PHP while 循环中):

<div class="modal hide fade" id="modal_id">
   <div class="modal-header">
       <button type="button" class="close" data-dismiss="modal">×</button>
       <h3>Project Details</h3>
   </div>
   <div class="modal-body">

       ID is <?php echo $display ?>

   </div>
   <div class="modal-footer">
       <a href="#" class="btn btn-primary" data-dismiss="modal">Save Changes</a>
       <a href="#" class="btn" data-dismiss="modal">Close</a>
   </div>
</div>

里面的文字是:ID是 该变量未通过按钮 href 传递。

有什么解决办法吗？

Answer 1

我想说最直接的方法是 AJAX。

1. 创建一个端点，您可以向其传递 ID，该端点将显示相关项目信息(例如 yoursite/projects/5 将返回有关 ID 为 5 的项目的数据)
2. 使用 AJAX 将 ID 发送到该端点并检索用户数据
3. 在显示数据时将其放入模式中。

更改按钮的链接

<button class="project-button btn btn-info" data-toggle="modal" data-target="#modal_id" data-project-id="<?=$row['id']?>">
  <i class="icon-question-sign icon-white"></i>  
</button>

AJAX 调用示例

var modal_body = $('#modal_id .modal-body');
$('.project_button').on('click', function() {
  var project_id = $(this).data('projectId');
  $.get('/project/', { id: project_id }, function(data) {
    // Populate modal
    modal_body.html(data);
  }
}

显然，您需要创建另一个页面来创建将返回并显示的 html。您还可以执行其他操作，例如在数据加载到模式中时显示加载动画。但这对您来说应该是一个很好的起点。