twitter-bootstrap 从查询中以模态显示数据
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13592066/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Display data in modal from query
提问by user1857690
I have this table with data and a link to display detail into modal
我有这个包含数据的表格和一个链接，可以在模态中显示详细信息
<td><a data-toggle="modal" class="btn" href="#modal_detail" id="<?php echo $rows['id']; ?>">Detail</a></td>
and this is the modal
这是模态
<div id="modal_detail" class="modal hide fade">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</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>
and this is the php file
这是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();
}
for the javascript is like below
对于 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
}
});
});
My Question is how to display the data from query in the php file (product detail) int o the modal window. The modal just fine, it can show and hide, but the data arent there.
我的问题是如何在模态窗口中的 php 文件（产品详细信息）中显示来自查询的数据。模态就好了，它可以显示和隐藏，但数据不存在。
I have tried many ways and search for tutorials but it still the same.
我尝试了很多方法并搜索教程，但它仍然相同。
Can anyone show me some example how to display the data using ajax into twitter bootstrap modal.
任何人都可以向我展示一些如何使用 ajax 将数据显示到 twitter bootstrap 模式的示例。
回答by Luzan Baral
You can also use find()and place the datato html()
您还可以使用find()和放置datatohtml()
success: function (data) {
console.log(data);
modal.find('#modalContent').html(data);
}
Full description here: Using Bootstrap Modal with AJAX to import data from MySQL
回答by Yohn
check out jschr's bootstrap modal
its a bootstrap modal plugin that allows you to insert data into the modal using ajax calls, and also displays a loading image while we wait for the data to be retrieved.
它是一个引导模态插件，允许您使用 ajax 调用将数据插入模态，并在我们等待检索数据时显示加载图像。
another way that I'm just thinking about would be to use the events to try and load the data, this is an example and not 100% tested, but I believe it should work
我正在考虑的另一种方法是使用事件来尝试加载数据，这是一个示例，而不是 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
}
});
})
