Laravel 动态数据填充在引导模式中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/48040681/
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
Laravel dynamic data populate in bootstrap modal
提问by User57
My bootstrap modal i have placed in dashboard. And the button which will populate the modal i placed in another page and in there I extends the dashboard. When i click on different product id button, product related information should comes up in modal. My question is how do i make it dynamic. means the bootstrap modal will populate based on product i clicked for quick view.
我的引导模式已放置在仪表板中。按钮将填充我放置在另一个页面中的模式，并在那里扩展仪表板。当我点击不同的产品 ID 按钮时，产品相关信息应该以模态形式出现。我的问题是如何使其动态化。意味着引导模式将根据我点击快速查看的产品填充。
**button for quick view in index.blade.php :**
<div class="btn-quickview">
<a href="#" data-toggle="modal" data-target="#modal-quickview">
<i class="fa fa-search-plus" aria-hidden="true">
</i> Quick View
</a>
</div>
**Modal placed in dashboard.blade.php**
<div id="modal-quickview" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-body">
<button type="button" class="close myclose" data-dismiss="modal">×</button>
<div class="product-view-area">
<div class="col-xs-12 col-sm-7 col-lg-7 col-md-7 product-details-area">
<div class="product-name">
<h2>Lorem Ipsum is simply</h2>
</div>
<div class="price-box">
<p class="special-price"> <span class="price-label">Special Price</span> <span class="price"> 9.99 </span> </p>
<p class="old-price"> <span class="price-label">Regular Price:</span> <span class="price"> 9.99 </span> </p>
</div>
</div>
</div>
</div>
<div class="modal-footer"> <a href="#" class="btn-services-shop-now" data-dismiss="modal">Close</a> </div>
</div>
</div>
</div>
回答by Rahul Reghunath
You can load content for bootstrap modal via jQuery ajax
您可以通过 jQuery ajax 加载引导模式的内容
<div id="view-modal" class="modal fade"
tabindex="-1" role="dialog"
aria-labelledby="myModalLabel"
aria-hidden="true" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close"
data-dismiss="modal"
aria-hidden="true">
×
</button>
<h4 class="modal-title">
<i class="glyphicon glyphicon-user"></i> User Profile
</h4>
</div>
<div class="modal-body">
<div id="modal-loader"
style="display: none; text-align: center;">
<img src="ajax-loader.gif">
</div>
<!-- content will be load here -->
<div id="dynamic-content"></div>
</div>
<div class="modal-footer">
<button type="button"
class="btn btn-default"
data-dismiss="modal">
Close
</button>
</div>
</div>
</div>
</div><!-- /.modal -->
<button data-toggle="modal" data-target="#view-modal"
id="getUser" class="btn btn-sm btn-info"
data-url="{{ route('dynamicModal',['id'=>$id])}}"
>
Submit
</button>
<script>
$(document).ready(function(){
$(document).on('click', '#getUser', function(e){
e.preventDefault();
var url = $(this).data('url');
$('#dynamic-content').html(''); // leave it blank before ajax call
$('#modal-loader').show(); // load ajax loader
$.ajax({
url: url,
type: 'GET',
dataType: 'html'
})
.done(function(data){
console.log(data);
$('#dynamic-content').html('');
$('#dynamic-content').html(data); // load response
$('#modal-loader').hide(); // hide ajax loader
})
.fail(function(){
$('#dynamic-content').html('<i class="glyphicon glyphicon-info-sign"></i> Something went wrong, Please try again...');
$('#modal-loader').hide();
});
});
});
</script>
In route file
在路由文件中
Route::get('dynamicModal/{id}',[
'as'=>'dynamicModal',
'uses'=> 'ControllerName@loadModal'
]);
In the controller
在控制器中
public function loadModal($id)
{
// write your process if any
return view('view_having_model_body',['data'=>$ifAnyData]);
}
回答by Tula
Another way to do this dynamically, add your product id to the data-target like
另一种动态执行此操作的方法是，将您的产品 ID 添加到数据目标中，例如
<a href="#"
data-title="Lorem Ipsum is simply"
data-old-price="9.99"
data-special-price="9.99"
data-toggle="modal"
data-target="#modal-quickview{{$product->id}}"
>
do the same thing to the modal body id like
对模态主体 id 做同样的事情
<div id="modal-quickview{{$product->id}}"
class="modal fade"
tabindex="-1"
role="dialog"
aria-labelledby="myModalLabel"
aria-hidden="true"
style="display: none;"
>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
In this case laravel generates a unique id for every modal. In the modal body you just have to display product based on their id
在这种情况下，laravel 为每个模态生成一个唯一的 id。在模态正文中，您只需要根据他们的 id 显示产品
回答by Shan
You can add the required data values in the anchor and append values to the modal popup. you can achieve it like this :
您可以在锚点中添加所需的数据值并将值附加到模态弹出窗口。你可以这样实现：
<a href="#" data-title="Lorem Ipsum is simply" data-old-price="9.99" data-special-price="9.99" data-toggle="modal" data-target="#modal-quickview">
<i class="fa fa-search-plus" aria-hidden="true">
</i> Quick View
</a>
<script>
$(function(){
$('.btn-quickview').on('click','a',function(ev){
$('.product-name').find('h2').html($(this).attr('data-title'))
$('.special-price').find('.price').html($(this).attr('data-special-price'))
$('.old-price').find('.price').html($(this).attr('data-old-price'))
})
})
</script>
If you don't want to append the data attributes to anchor, you can fetch data by Ajax and set values appropriately ;)
如果您不想将数据属性附加到锚点，则可以通过 Ajax 获取数据并适当地设置值；)
