Show multiple Toastr notifications in Laravel

Question

I am using the Toastr library in my Laravel project, which only shows one notification on page redirect. I want to show multiple notifications for different tasks on form submission, such as when the form has been successfully submitted and an email has been successfully sent to the mentioned person in the form. My current implementation is as follows:

public function store(Request $request)
{
     $notification = array(
         'message' => 'Form submitted successfully',
         'alert-type' => 'success',
     );

     return redirect(route('my.page.index'))->with($notification);
}

Script code:

<script>
    @if (Session::has('message'))
        var type = "{{ Session::get('alert-type', 'info') }}";
        switch (type){
            case 'info':
                toastr.info("{{ Session::get('message') }}");
                break;
            case 'warning':
                toastr.warning("{{ Session::get('message') }}");
                break;
            case 'success':
                toastr.success("{{ Session::get('message') }}");
                break;
            case 'error':
                toastr.error("{{ Session::get('message') }}");
                break;
        }
    @endif
</script>

I tried to create an array of arrays for the $notification:

$notification = array(
    'messages' => array(
        array(
            'status'=>'success',
            'message'=> 'Email sent successfully'
        ),
        array(
            'status'=>'success',
            'message'=> 'Form submitted successfully'
        )
    )
);
return redirect(route('my.page.index'))->with($notification);

I expected that there would be two notifications when the page is redirected, but there is no notification after page redirection.

I have gone through this post: how to show multiple toast notifications in laravel but it tells me to use AJAX. I am directly using a minified Toastr script library file, which cannot be edited, such as this:

<script src="{{ asset('admin-assets/assets/js/toastr.min.js') }}"></script>

Answer 1

you can make your notifications as an array like

$notifications = [
    ['type' => 'success', 'message' => 'Hello'],
    ['type' => 'warning', 'message' => 'Error'],
];
return redirect(route('home'))->with('notifications', $notifications);

and then in your view get that array and loop over to show all notifications

<script>
    @if (Session::has('notifications'))
        const notifications = @json(Session::get('notifications'));
        notifications.forEach(element => {
            const {
                type,
                message
            } = element;
            switch (type) {
                case 'info':
                    toastr.info(message);
                    break;
                case 'warning':
                    toastr.warning(message);
                    break;
                case 'success':
                    toastr.success(message);
                    break;
                case 'error':
                    toastr.error(message);
                    break;
            }
        });
    @endif
</script>