Question 243673 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – Bootstrap Toasts instead of Bootstrap alert in Laravel

I am currently using Bootstrap Alert to show the message in laravel application

@if(Session::has('message'))
    <div class="alert alert-{{ session('class') }} alert-dismissible fade show rounded-0"
        role="alert">
        <i class="fa fa-{{ session('icon') }}"></i>
        {{ session('message') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert"
            aria-label="Close"></button>
    </div>
@endif

But I want to use Bootstrap toast with a dynamic message

<div class="toast-container position-fixed bottom-0 end-0 p-3">
    <div id="toast" class="toast align-items-center text-bg-info text-white rounded-0" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="d-flex">
            <div class="toast-body">
           Some Message <i class="far fa-face-smile"></i>
           </div>
             <button type="button" class="btn-close me-2 m-auto"  data-bs-dismiss="toast" aria-label="Close"></button>
      </div>
   </div>
</div>

I’ve created the alert component. How should I make toast system trigger.
Using laravel 10 and bootstrap 5.3

Tags:

2

Answers


  1. 0 
    @if(Session::has('message'))

<div class="toast-container position-fixed bottom-0 end-0 p-3">
    <div id="toast" class="toast align-items-center text-bg-info text-white rounded-0" role="toast" aria-live="assertive" aria-atomic="true">
        <div class="d-flex">
            <div class="toast-body">
              {{session('message')}}
              <i class="far fa-face-smile"></i>
           </div>
             <button type="button" class="btn-close me-2 m-auto"  data-bs-dismiss="toast" aria-label="Close"></button>
      </div>
   </div>
</div>

@endif

    This will help you
    always when you pass flash message try to use session() and the key of session for example message or error .

    Login or Signup to reply.
  2. 0

    Add this in your base layout or view:

    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>

    Create a new Blade view for your toast messages – toast.blade.php.

    <div class="toast align-items-center text-bg-info text-white rounded-0" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="d-flex">
        <div class="toast-body">
            {{ $message }}
        </div>
        <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
</div>

    Pass the toast message using with().

    return view('your-view')->with('message', 'This is a toast message.');

    Add this where you wanna show the toast message:

    @if(session('message'))
    @include('toast')
@endif

    To show the toast, you can use JS. Bootstrap 5.3 toast requires JavaScript to be triggered.

    <script>
    $(document).ready(function() {
        // Get the toast element by its ID
        var toastElement = document.getElementById('toast');

        // Create a new Bootstrap Toast instance
        var toast = new bootstrap.Toast(toastElement);

        // Show the toast
        toast.show();
    });
</script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search