Question

我正在做一个Instagram风格的小项目，但具有使用Larvel和MDBootstrap 的基本功能。

Showing my design

我正在填写表格以编辑个人信息。这对使用 Laravel 有效，我希望当 Laravel 返回表单错误时，它在表单页面中显示错误的“ Toast通知”。

这些“ toast”通知是通过单击按钮触发的，它们在HTML中没有正文，可以随时使用，当您调用它们时。

showing "toast notification"

我该怎么办才能检测到错误，而无需按按钮即可触发此“吐司”？谢谢

Answer 1

我了解如果Laravel返回错误，您需要举杯。让我提出两个解决方案。

1。使用toastr

在主模板文件中输入以下内容：

$('.container').mouseover(function(){ 
    $(this).find('img').css('width', 'auto');
}

不要忘记将其放在您的主要js文件中：

@if (session('error'))
  <script>toastr.error('<?php echo session('error'); ?>')</script>
@endif

2。使用Bootstrap本机toast

在主模板文件中输入以下内容：

$('.toast').toast({
    delay:2000,
    // Other options
});

不要忘记将其放在您的主要js文件中：

@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">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>
@endif

Laravel返回错误后如何显示Bootstrap通知/ Toast（MDBootstrap）

1 个答案: