Question

我有这个表，其中包含数据和一个显示详细信息的链接

<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 bootstrap模式中的示例。

Answer 1

您也可以使用find()并将data置于html()

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

完整说明：Using Bootstrap Modal with AJAX to import data from MySQL

Answer 2

结帐jschr's bootstrap modal

它是一个bootstrap模式插件，允许您使用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
      }
  });
})

从查询中以模态显示数据

2 个答案: