时间戳

首页 > 解决方案 > Laravel 返回错误后如何显示 Bootstrap 通知/toast (MDBootstrap)

laravel - Laravel 返回错误后如何显示 Bootstrap 通知/toast (MDBootstrap)

问题描述

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

展示我的设计

我正在制作表格来编辑个人信息。使用Laravel是有效的，我希望当Laravel返回表单错误时，它会在表单页面中显示错误的“Toast 通知”。

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

显示“吐司通知”

我可以做些什么来检测错误，触发这个“toast”而无需按下按钮？谢谢

标签： laraveltwitter-bootstraplaravel-5bootstrap-4mdbootstrap

解决方案

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

1.使用烤面包机

在你的主模板文件中放这个：

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

并且不要忘记把它放在你的主 js 文件中：

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

2.使用Bootstrap原生吐司

在你的主模板文件中放这个：

    @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

并且不要忘记把它放在你的主 js 文件中：

$('.toast').toast({})

推荐阅读