如何在 Laravel return 错误后显示 Bootstrap 通知 / toast (MDBootstrap)
How to show a Bootstrap notification / toast (MDBootstrap) after Laravel return an error
我正在做一个 Instagram 风格的小项目,但具有基本功能使用 Larvel 和 MDBootstrap。
Showing my design
我正在制作表格来编辑个人信息。使用 Laravel 是有效的,我希望当 Laravel returns 形式错误时在表单页面中显示 "Toast Notification" 错误。
这些 "toast" 通知是通过单击按钮触发的,它们在 HTML 中没有正文,您可以在调用它们时使用它们。
showing "toast notification"
我该怎么做才能检测到错误,无需按按钮即可触发此 "toast"?谢谢
我知道如果 Laravel 返回错误,您需要祝酒。
让我提出两个解决方案。
1.使用 toastr
在您的主模板文件中放入:
@if (session('error'))
<script>toastr.error('<?php echo session('error'); ?>')</script>
@endif
并且不要忘记将其放入您的主 js 文件中:
$('.toast').toast({
delay:2000,
// Other options
});
2。使用 Bootstrap 原生 toast
在您的主模板文件中放入:
@if (session('error'))
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded mr-2" alt="...">
<strong class="mr-auto">Bootstrap</strong>
<small class="text-muted">11 mins ago</small>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
@endif
并且不要忘记将其放入您的主 js 文件中:
$('.toast').toast({})
我正在做一个 Instagram 风格的小项目,但具有基本功能使用 Larvel 和 MDBootstrap。
Showing my design
我正在制作表格来编辑个人信息。使用 Laravel 是有效的,我希望当 Laravel returns 形式错误时在表单页面中显示 "Toast Notification" 错误。
这些 "toast" 通知是通过单击按钮触发的,它们在 HTML 中没有正文,您可以在调用它们时使用它们。
showing "toast notification"
我该怎么做才能检测到错误,无需按按钮即可触发此 "toast"?谢谢
我知道如果 Laravel 返回错误,您需要祝酒。 让我提出两个解决方案。
1.使用 toastr
在您的主模板文件中放入:
@if (session('error'))
<script>toastr.error('<?php echo session('error'); ?>')</script>
@endif
并且不要忘记将其放入您的主 js 文件中:
$('.toast').toast({
delay:2000,
// Other options
});
2。使用 Bootstrap 原生 toast
在您的主模板文件中放入:
@if (session('error'))
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded mr-2" alt="...">
<strong class="mr-auto">Bootstrap</strong>
<small class="text-muted">11 mins ago</small>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
@endif
并且不要忘记将其放入您的主 js 文件中:
$('.toast').toast({})