2

我有这张表，里面有数据和一个链接，可以在模式中显示详细信息

<td><a data-toggle="modal" class="btn" href="#modal_detail" id="<?php echo $rows['id']; ?>">Detail</a></td>

这是模态

<div id="modal_detail" class="modal hide fade">
    <div class="modal-header">
      <button class="close" data-dismiss="modal">&times;</button>
      <h3>Detail Product</h3>
    </div>
    <div class="modal-body">            
        <div id="modalContent" style="display:none;">
        Here i want to display data from query about the detail of a product (name, price etc)      
        </div>
    </div>
    <div class="modal-footer">
      <a href="#" class="btn btn-info" data-dismiss="modal" >Close</a>
    </div>
</div>

这是php文件

if(isset($_GET['detail'])) {
    include_once('../libs/class.database.php');
    $k = new Database();
    $link=$k->connect(); 
    $query = $link->query("SELECT name,price FROM products ORDER BY date_created ASC");
    $result=$query->fetchAll();
}

对于javascript如下

$("a[data-toggle=modal]").click(function() {
    var id_beli = $(this).attr('id');

    $.ajax({
        cache: false,
        type: 'GET',
        url: 'controller/modalPembelian.php',
        data: 'detail=' + id_beli,
        success: function(data) {
            $('#modal_detail').show();
            $('#modalContent').show().html(data); //this part to pass the var
        }
    });
});

我的问题是如何将 php 文件（产品详细信息）中的查询数据显示到模态窗口中。模态很好，它可以显示和隐藏，但数据不在那里。

我尝试了很多方法并搜索教程，但它仍然是一样的。

谁能告诉我一些如何使用 ajax 将数据显示到 twitter 引导模式中的示例。

4

2 回答 2

4

您还可以使用并find()放置datahtml()

success: function (data) {
   console.log(data);
   modal.find('#modalContent').html(data);
}

此处的完整描述：使用带有 AJAX 的 Bootstrap Modal 从 MySQL 导入数据

于 2014-12-21T16:56:57.010 回答
1

查看jschr 的引导模式

它是一个引导模式插件，允许您使用 ajax 调用将数据插入到模式中，并在我们等待数据被检索时显示加载图像。

我正在考虑的另一种方法是使用事件来尝试加载数据，这是一个示例，未经过 100% 测试，但我相信它应该可以工作

$('#modal_detail').on('show', function(){
  var id_beli = $(this).attr('id');
  $('#modalContent').html('Loading..')

  $.ajax({
      cache: false,
      type: 'GET',
      url: 'controller/modalPembelian.php',
      data: 'detail=' + id_beli,
      success: function(data) {
        $('#modalContent').html(data); //this part to pass the var
      }
  });
})
于 2012-11-27T21:42:22.250 回答