Is there any way to set up a flash message session for laravel? Which means when I click the button to add or delete item(s), the flash messages are displayed. But Is there any way to fade out?

in view file I put the code below:-

  <script>
      $(document).ready(function(){
          setTimeout(function() {
              $('#msg').fadeOut('fast');
          }, 30000);
      });
  </script>

  @if (session('status'))
      <div class="alert alert-success">
          <p class="msg"> {{ session('status') }}</p>
      </div>
  @endif

Controller file which I used for return the message.

return back()->with('status', $pro->pro_name . ' add to cart successfully');

Is there any way to set up a flash message session for laravel? Which means when I click the button to add or delete item(s), the flash messages are displayed. But Is there any way to fade out?

in view file I put the code below:-

  <script>
      $(document).ready(function(){
          setTimeout(function() {
              $('#msg').fadeOut('fast');
          }, 30000);
      });
  </script>

  @if (session('status'))
      <div class="alert alert-success">
          <p class="msg"> {{ session('status') }}</p>
      </div>
  @endif

Controller file which I used for return the message.

return back()->with('status', $pro->pro_name . ' add to cart successfully');

• javascript
• php
• laravel

Share Improve this question Follow edited Oct 6, 2019 at 17:06 Salim Djerbouh 11.1k66 gold badges3333 silver badges6464 bronze badges asked Nov 7, 2018 at 6:51 lun7codelun7code 19922 gold badges44 silver badges1515 bronze badges 2

• Clicking a button happens client-side, flash messages are stored serverside. Unless you want the whole page to refresh when you click the button I suggest just looking into alternative solutions. If it's just a "toast" (or growl) message you want then take a look at bootstrap-notify.remabledesigns. – apokryfos Commented Nov 7, 2018 at 7:16
• still not work, could you check my post again, i just edited it. – lun7code Commented Nov 7, 2018 at 8:18

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

Try this

<script>
      $(document).ready(function(){
    $('.alert-success').fadeIn().delay(10000).fadeOut();
      });
  </script>

  @if (session('status'))
      <div class="alert alert-success">
          <p class="msg"> {{ session('status') }}</p>
      </div>
  @endif

Hope this will help you

$(window).load(function(){
   setTimeout(function(){ $('.alert-success').fadeOut() }, 5000);
});

This div will fade out after 5 seconds.

@if (session('status'))
  <div class="alert alert-success">
      <p class="msg"> {{ session('status') }}</p>
  </div>

@endif

Try using toastr, it is a Javascript library for non-blocking notifications.

I know it's too late, but you could try this:

$(document).ready(function(){
     if (('.alert').is(':visible')) { 
        setTimeout(() => {
           $('.alert').fadeOut('slow')
        }, 3000);
     }
});