Bootbox 警报未显示在 Laravel 视图中
Bootbox alert doesn't show up in Laravel view
我正在尝试在我的 Laravel 视图中使用引导框确认警报,它看起来比标准的 js 视图更好,但警报没有显示,我有 popper,bootstrap和脚本中的 bootbox
这是代码片段,整个视图要大很多,但这是它的缩小版,以使其更具可读性
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.bundle.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootbox@5.1.2/dist/bootbox.all.min.js"></script>
<table>
<tr>
<th>ID</th>
<th>Action</th>
</tr>
@foreach($etablissements as $etablissement)
<tr>
<td>{{$etablissement->id}}</td>
<td>
<form action="{{ route('etablissements.destroy', $etablissement->id) }}" method="POST">
{{ method_field('DELETE') }}
{{ csrf_field() }}
<button type='submit' name ="s"></button>
</form>
</td>
</tr>
@endforeach
</table>
<script type="text/javascript">
var aTags = document.getElementsByTagName("s");
for (var i=0;i<aTags.length;i++){
addEventListener(aTags[i], 'click', function(){
bootbox.confirm({
message: "This is a confirm with custom button text and color! Do you like it?",
buttons: {
confirm: {
label: 'Yes',
className: 'btn-success'
},
cancel: {
label: 'No',
className: 'btn-danger'
}
},
callback: function (result) {
console.log('This was logged in the callback: ' + result);
}
});
});
}
</script>
我没有使用过 bootbox,但是从你的 JS 中我注意到一些你需要更改的地方是:
var aTags = document.getElementsByTagName("s");
s
不是标签名,而是元素名,所以改成这样:
var aTags = document.getElementsByName("s");
然后将点击事件监听器附加到每个按钮,将其更改为:
aTags[i].addEventListener('click', function(e){
e.preventDefault(); // this will prevent the default action of the button
...
完成此操作后,请确保打开浏览器控制台以检查是否有任何错误。
我正在尝试在我的 Laravel 视图中使用引导框确认警报,它看起来比标准的 js 视图更好,但警报没有显示,我有 popper,bootstrap和脚本中的 bootbox
这是代码片段,整个视图要大很多,但这是它的缩小版,以使其更具可读性
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.bundle.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootbox@5.1.2/dist/bootbox.all.min.js"></script>
<table>
<tr>
<th>ID</th>
<th>Action</th>
</tr>
@foreach($etablissements as $etablissement)
<tr>
<td>{{$etablissement->id}}</td>
<td>
<form action="{{ route('etablissements.destroy', $etablissement->id) }}" method="POST">
{{ method_field('DELETE') }}
{{ csrf_field() }}
<button type='submit' name ="s"></button>
</form>
</td>
</tr>
@endforeach
</table>
<script type="text/javascript">
var aTags = document.getElementsByTagName("s");
for (var i=0;i<aTags.length;i++){
addEventListener(aTags[i], 'click', function(){
bootbox.confirm({
message: "This is a confirm with custom button text and color! Do you like it?",
buttons: {
confirm: {
label: 'Yes',
className: 'btn-success'
},
cancel: {
label: 'No',
className: 'btn-danger'
}
},
callback: function (result) {
console.log('This was logged in the callback: ' + result);
}
});
});
}
</script>
我没有使用过 bootbox,但是从你的 JS 中我注意到一些你需要更改的地方是:
var aTags = document.getElementsByTagName("s");
s
不是标签名,而是元素名,所以改成这样:
var aTags = document.getElementsByName("s");
然后将点击事件监听器附加到每个按钮,将其更改为:
aTags[i].addEventListener('click', function(e){
e.preventDefault(); // this will prevent the default action of the button
...
完成此操作后,请确保打开浏览器控制台以检查是否有任何错误。