将 MySQL 数据导入单个引导模式框？答案

【问题标题】：Importing MySQL Data into Single Bootstrap Modal Box?将 MySQL 数据导入单个引导模式框？
【发布时间】：2013-03-02 05:22:21
【问题描述】：

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

我正在为我工作的公司（一家印刷厂）构建一个“仪表板”。此仪表板将列出所有当前正在进行的工作、已完成的工作等（它确实会让那里的每个人生活得更好）。

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

这很有效，但我开始认为......只有少数客户插入，一切都很好，但是一旦我们有 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 传递。

有什么解决办法吗？

【问题讨论】：

只是想澄清一下。您想要的是当用户单击表中的一行（或与该行关联的按钮）时，会出现一个仅包含该项目数据的模式。然后他们可以关闭该模式并选择一个不同的项目，该模式将重新打开，但使用新项目的信息。对吗？
绝对正确的内森。如果我在上面的描述中不是很清楚，我很抱歉。
根据我的回答，您是否有机会再使用它？还有其他问题吗？
嗨，Nathan，您的帖子促使我研究 AJAX。我还没有找到解决方案，但我现在知道我需要什么语言才能让它工作。我精通 HTML、CSS、PHP……但 Javascript（和 AJAX）我几乎一无所知。

标签： php jquery twitter-bootstrap modal-dialog

【解决方案1】：

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

创建一个端点，您可以将 id 传递给该端点，该端点将显示相关的项目信息（类似于 yoursite/projects/5 将返回有关 ID 为 5 的项目的数据）
使用 AJAX 将 ID 发送到该端点并取回用户数据
在显示数据时将该数据放入模式中。

将链接更改为按钮

<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。您还可以做其他事情，例如在数据加载到模态时显示加载动画。但这对你来说应该是一个很好的起点。

【讨论】：

感谢您上面的示例，我能够使代码正常工作。我现在只需单击一个按钮即可显示所有信息，而无需生成大量多余的代码。现在信息已填充到 textareas 中，我需要了解如何更新信息以在进行更改时发送回数据库。

【解决方案2】：

最好的方法是使用AJAX，这样您就可以将id 传递到您选择的另一个页面

我发现同样的问题在这里得到了完整的解释：http://thecomputerstudents.com/web/using-bootstrap-modal-ajax-import-data-mysql/

【讨论】：