Question 395431 in Laravel Question posted in
The official Laravel Documentation can be found here.

Show multiple Toastr notifications in Laravel

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>
Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    When you are sending messages, as array, you need to run a loop to show multiple error messages, for example for multiple

    $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);

    and your view code should be like

    <script>
@if (Session::has('messages'))
    const notifications = @json(Session::get('messages'));
    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search