Boostrap模式集成在laravel表中 [英] Boostrap modal integration in laravel table
问题描述
我有一个laravel datatable如下：
< head>
< link rel =stylesheethref =https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.cssintegrity =sha384-WskhaSGFgHYWDcbwN70 / dfYBj47jz9qbsMId / iRN3ewGhXQFZCSftd1LZCfmhktB crossorigin = 匿名 >
< script src =https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.jsintegrity =sha384-smHYKdLADwkXOn1EmN1qk / HfnUcbVRZyYmZ4qpPea6sjB / pTJ0euyQp0Mk8ck + 5Tcrossorigin =匿名>< /脚本>
< script src =https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js>< / script>
< script type =text / javascriptsrc =https://cdn.datatables.net/v/bs/dt-1.10.16/datatables.min.js>< / script>
< link rel =stylesheettype =text / csshref =https://cdn.datatables.net/v/bs/dt-1.10.16/datatables.min.css/> ;
< link href ={{asset（'css / app.css'）}} =stylesheet>
< link rel =stylesheettype =text / csshref =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css/>
< link rel =stylesheettype =text / csshref =https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap.min.css/>
;
< / head>
这是表格：
< td><按钮
type =button
class =btn btn -btn -lg
data-toggle =modal
data-target =＃favoritesModal>
添加到收藏夹
< / button>< / td>
在这里我创建了模式：
< div class =modal fadeid =favoritesModal
tabindex = - 1role =dialog
aria-labelledby =favoritesModalLabel >
< div class =modal-dialogrole =document>
< div class =modal-content>
< div class =modal-header>
< button type =buttonclass =close
data-dismiss =modal
aria-label =关闭>
< span aria-hidden =true>& times;< / span>< / button>
< h4 class =modal-title
id =favoritesModalLabel>太阳也升起< / h4>
< / div>
< div class =modal-body>
< p>
请确认您想要添加
< b>< span id =fav-title> The Sun Also Rises< / span>< / b>
加入您的收藏夹列表。
< / p>
< / div>
< div class =modal-footer>
< button type =button
class =btn btn-default
data-dismiss =modal>关闭< / button>
< span class =pull-right>
< button type =buttonclass =btn btn-primary>
添加到收藏夹
< / button>
< / span>
< / div>
< / div>
< / div>
< / div>
任何人都可以请帮助我如何在数据表行中实现这种模式？
基本上我希望每次用户点击一个按钮显示图片以打开一个带有图片的模式
提前感谢
所以 - 有点像这样：
< td><按钮
type =button
class =btn btn-primary btn-lg imageButton
data-toggle =modal
data-img-title ={{$ looped-> title}}
data-img-id ={{$ looped-> ; id}}
data-target =＃favoritesModal>
添加到收藏夹
< / button>< / td>
然后，一些jQuery AJAX从控制器获取图像数据，然后将该HTML放入模态。像这样：
$（'。imageButton'）。on（'click'，function（）{
var imgTitle = $（this）.data（'img-title'）;
var imgId = $（this）.data（'img-id'）;
$ .ajax（{
url：{{url（'url_for_your_image_returning_controller_method）}}+/+ imgId，
类型：GET，
成功：函数（h）{
$（。 （）;
$（'＃modal'）。modal（）;
（'。modal-body）。 }，
error：function（）{
swal（Error，Unable to show up the creation dialog。，error）;
}
}）
}）;
具体取决于您发送的内容是否有效。您还可以选择创建一个图片标签，并通过新的src发送，而不是照片数据，如果您想显示缩略图：
< img id =modalImagesrc ={{url（'images'）。/。（isset（$ image-> thumb）？$ image-> thumb：$ image - > image）}}
class =picToModal>
然后替换 $（＃modalImage）中的src， code>元素与您的新来源和触发器。有很多选择和分支，你需要重新工作以适应，但这应该让你开始。
I have a laravel datatable the following:
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/bs/dt-1.10.16/datatables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs/dt-1.10.16/datatables.min.css"/>
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.2.1/css/responsive.bootstrap.min.css"/>
</head>
This is the table:
<td><button
type="button"
class="btn btn-primary btn-lg"
data-toggle="modal"
data-target="#favoritesModal">
Add to Favorites
</button></td>
and here I have created the modal:
<div class="modal fade" id="favoritesModal"
tabindex="-1" role="dialog"
aria-labelledby="favoritesModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close"
data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span></button>
<h4 class="modal-title"
id="favoritesModalLabel">The Sun Also Rises</h4>
</div>
<div class="modal-body">
<p>
Please confirm you would like to add
<b><span id="fav-title">The Sun Also Rises</span></b>
to your favorites list.
</p>
</div>
<div class="modal-footer">
<button type="button"
class="btn btn-default"
data-dismiss="modal">Close</button>
<span class="pull-right">
<button type="button" class="btn btn-primary">
Add to Favorites
</button>
</span>
</div>
</div>
</div>
</div>
Can anyone please help me how do I implement this modal in a datatable row? Basically I want everytime the user clicks a button show Image to open a modal with the image inside Thanks in advance
Probably easiest if you add a unique class (say... 'imageButton') as well as a data-image-id to the button to identify which image you want. If you want individual title, you may wish to add a data-img-title on the same button.
So - sort of like this:
<td><button
type="button"
class="btn btn-primary btn-lg imageButton"
data-toggle="modal"
data-img-title ="{{$looped->title}}"
data-img-id = "{{$looped->id}}"
data-target="#favoritesModal">
Add to Favorites
</button></td>
Then, some jquery AJAX to get the image data from your controller and then place that HTML inside the modal. Something like this:
$('.imageButton').on('click', function () {
var imgTitle = $(this).data('img-title');
var imgId = $(this).data('img-id');
$.ajax({
url: "{{url('url_for_your_image_returning_controller_method)}}" + "/" + imgId,
type: "GET",
success: function (h) {
$(".modal-title").text(imgTitle);
$(".modal-body").html(h);
$('#modal').modal();
},
error: function () {
swal("Error", "Unable to bring up the creation dialog.", "error");
}
})
});
Depending on what you are sending through that would work. You can also chose to create an image tag, and send through the new src instead of photo data something like this if you want to show thumbnails as well:
<img id="modalImage" src="{{url('images')."/".(isset($image->thumb)?$image->thumb:$image->image)}}"
class="picToModal">
Then replace the src within the $("#modalImage") element with your new source and trigger. There are lots of options and branches, and you'll need to re-work to suit, but this should get you started.
这篇关于Boostrap模式集成在laravel表中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
