如何加载PHP引导模式对话框中的数据?在这种情况下,产品是动态加载到页面上的。用户可以点击任何项目,根据用户点击的项目,Bootstrap mode应该加载该点击项目的数据。
PHP代码:
$products = Product::byCategory($category->id);
while ($product = $products->fetch(PDO::FETCH_OBJ)) {
echo '<div class="row">';
echo '<div class="col-md-7"><b>' . $product->name . '</b>';
if($product->is_vegi == YES){echo ' <img src="//dy3erx8o0a6nh.cloudfront.net/images/diet_veg_17px.png" alt="Vegetarian" class="iconVegetarian">';}
echo "<br />" . $product->description . "</div>";
echo '<div class="col-md-5">';
echo '<div class="row">';
echo '<div class="col-md-offset-3 col-md-4">£' . $product->price . '</div>';
echo '<div class="col-md-3"><input type="text" maxlength="2" name="qty" id="qty' . $product->id . '" class="form-control custom-control input-sm" value="1" readonly /></div>';
echo '<div class="col-md-2"><button type="button" id="' . $product->id . '" class="showModalForPizza btn btn-info btn-xs" data-toggle="modal" data-target="#pizzaDetails"><i class="fa fa-wrench"></i> Change</button></div>';
echo "</div></div></div><br />";
}
ID存储在下方的id="' . $product->id . '"
整行中
echo '<div class="col-md-2"><button type="button" id="' . $product->id . '" class="btn btn-info btn-xs" data-toggle="modal" data-target="#pizzaDetails"><i class="fa fa-wrench"></i> Change</button></div>';
目标数据是存储在具有匹配ID的模态中的数据。加载这些数据的最佳方式是什么?
我以前做过很多次。。。我做的是:
1) 在我的项目中有一个名为ajax
的文件夹
2) 我在里面放了一个名为ajax_get_product_info.php
的文件,它将返回一个HTML响应,其中包含结构良好的产品信息。
//NOTE: CHANGE METHOD NAMES FOR THE EQUIVALENTS ON YOUR FRAMEWORK/CLASS
$productInfo = Product::byId($_GET["id"]);
?>
<div class="row">
<div class="col-sm-6">
<h1><?php echo $productInfo->Title; ?></h1>
<b>Price: $</b><?php echo $productInfo->Price; ?>
<hr/>
<p><?php echo $productInfo->Description; ?></p>
</div>
<div class="col-sm-6">
<img src="<?php echo $productInfo->ImageURL; ?>" class="dialog-image"/>
</div>
</div>
3) 使用jQuery(因为您使用的是Bootstrap,所以您已经包含了它),并使用它的一个AJAX方法在模态中加载返回的。
您可以使用函数$("#modalContent").html(theAjaxResponse)
来实现这一点;
有关jQuery ajax和示例的更多信息,请点击此处:http://api.jquery.com/jquery.ajax/
当你点击按钮时,它应该会触发AJAX函数到url "/ajax/ajax_get_product_info.php?id=" + $(this).id()
如果你阅读了jQuery文档中的例子,你可能会很容易理解,否则,来问吧!
您只需要调用Through Javascript
这是代码
$('.showModalForPizza').on('click', function() {
var id = $(this).attr('id');
$.ajax({
url: 'PHPFilename',
type: 'get',
data: {id: id},
success: function(data){
console.log(data);
$('#pizzaDetails').html(data);
$('#pizzaDetails').modal('show');
}
error: function(){
console.log("error");
}
});
});