使用 AJAX 调用引导动态模式答案

【问题标题】：Bootstrap Dynamic Modals With AJAX Calling使用 AJAX 调用引导动态模式
【发布时间】：2016-03-07 01:03:16
【问题描述】：

我正在使用 codeigniter v3 和 bootstrap v3。
我有一个消息表和表中的每条消息，当单击详细信息按钮时，引导程序 modal 会显示详细信息。
在 for 循环中，我打印表格行，并且对于每一行（在循环结束时），我放置了整个引导模式结构。
我的问题是：如何使用 ajax 调用来做到这一点？我的意思是，我不会为每个表格行（每条消息）放置所有模式代码，并且每次单击详细信息按钮时，我都会处理显示模式使用 ajax。
感谢关注。

已解决：
我在 bootstrap 官网找到了一个简单且我认为更好的方法：Using data- attribute. 我用一个可行的例子来说明谁无法获得更好的解决方案：

假设我们想用一些数据填充表格主体（作为我的问题）：

//just table body code
<tbody>
 <?php foreach($fields as $field): ?>
  <tr>
   <td><?php $field->some_field; ?></td>
   //other <td> elements
   <td>
      <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" 
       data-time="<?php echo $field->time; ?>">Show Details</button>
   </td>
  </tr>
 <?php endforeach; ?>
</tbody>

所以在一个循环中，我读取数据（在控制器中，使用模型的方法获取，并使用 $data['fields'] 传递给视图）。现在为了在模态中显示一些细节，我使用 HTML5 数据属性。假设，我想在模态中显示 time。正如您在上面的代码中看到的，我将时间字段放在数据时间中：

data-time="<?php echo $field->time; ?>"

现在我创建一个模态作为模板（您可以在 bootstrap 官方网站上看到整个模态结构）并将其置于循环之外（所有表行的一个模态；动态数据）。在下面的代码中，我在模态体中放置了一个元素（作为占位符）：

//... in the modal body section
<h4 id="time"></h4>

这个元素没有内容，因为我想检索每行时间归档并把它放在这个元素中。请注意，这对于定义 id 是实用的。现在一些脚本：

//first load jquery
<script type="text/javascript">
 $(document).ready(function(){
  $('#myModal').on('show.bs.modal', function(event){
   var btn = $(event.relatedTarget); // find which button is clicked

   var time = btn.data('time'); //get the time data attribute

   $('#time').text(time); //put the data value in the element which set in the modal with an id
  });
 });
</script>

您可以定义更多的数据属性并以这种方式检索。

【问题讨论】：

标签： ajax twitter-bootstrap codeigniter

【解决方案1】：

我不会给你写代码，而是给你指路：

您只需要一个用于整个页面的模式，它就像一个模板一样工作。
您需要在模态中显示相同的数据/信息。您可以通过 Javascript/jQuery 从您的 HTML 中获取这些数据。我更喜欢数据属性。类似：

data-modal-title="我的标题" data-modal-content="我的内容"

现在您将这些数据注入到模态模板中并通过 Javascript 打开模态。

【讨论】：