Question

我正在使用 codeigniter v3 和 bootstrap v3 。
我有一个表格用于消息和表格中的每条消息，当点击详细信息按钮时，引导程序模态显示详细信息。
在for循环中，我打印表行和每行（在循环结束时），我放置整个引导模态结构。
我的问题是：怎么能用ajax调用呢？我的意思是，我没有为每个表行（每个消息）放置所有模态代码，每次点击详细信息按钮时，我处理显示模态用ajax。
谢谢你的关注。

的解决：
我在bootstrap官方网站上找到了一个简单且我认为更好的方法：使用数据属性。 我用一个工作实例展示了哪些无法实现更好的解决方案：

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

//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数据属性。假设，我想在模态中显示时间。正如您在上面的代码中看到的，我将时间字段放在数据时间中：

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>

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

Answer 1

我不会为你编写代码，但会告诉你：

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

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

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

使用AJAX调用引导动态模式

1 个答案: