提交表单后如何在Laravel创建短时间提醒消息？

Question

This is custom alert component to include on every page. I tried it using session-flash, but it remains on page before and also after showing message. How to trigger and show it only after submitting form for short time. using Laravel

@section('alert-section')
   <div >
        <div class="alert alert-{{$color}}" role="alert" style="height: 36x; line-height:36px; padding:4px 20px;">
        <h5>{{$message}}</h5>
        </div>
    </div>
@endsection

session flash remains until next page reload, Is there any way to remove it after some seconds.

@if(isset($message))
    <x-alert color="success" message="Data has been updated successfully!" />
@endif

This code triggers the message after submitting form, but how to remove it after some seconds

Answer 1

You can refer to this sample code for setTimeout for hiding an element.

setTimeout(() => {
  const box = document.getElementById('box');

  // 👇️ removes element from DOM
  box.style.display = 'none';

  // 👇️ hides element (still takes up space on the page)
  // box.style.visibility = 'hidden';
}, 1000); // 👈️ time in milliseconds

Or you can try this way with jQuery:

setTimeout(function() {
    $('.alert').fadeOut('fast');
}, 1000); // 👈️ time in milliseconds