[FIXED] How to show a Bootstrap notification / toast (MDBootstrap) after Laravel return an error

Issue

I'm doing a small project in the style of Instagram but with basic features using Larvel and MDBootstrap.

Showing my design

I am making the form to edit personal information. Which is valid using Laravel, I want that when Laravel returns an error of the form it shows a "Toast Notification" of error in the page of the form.

These "toast" notifications are triggered by clicking on a button, they have no body in the HTML, they are ready to be used when u call them.

showing "toast notification"

What can I do to detect an error, trigger this "toast" without having to press a button? Thank you

Solution

I understand you need to show a toast if an error is returned by Laravel. Let me propose two solutions.

1. using toastr

In your main template file put this:

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

And don't forget to put this in your main js file:

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

2. Using Bootstrap native toast

In your main template file put this:

    @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

And don't forget to put this in your main js file:

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

Answered By - Lucien Dubois