Laravel Toastr JS Notification Message Popup Example

By Hardik Savani September 23, 2024 Category : Laravel Bootstrap

In this post, i would like show you how to add toastr js plugin notification popup in laravel 6, laravel 7, laravel 8, laravel 9, laravel 10 and laravel 11 from scratch. toastr plugin provide us success message notification, info message notification, warning message notification, error message notification that way we can add notification with good layout.

Laravel have also several package for notification but i use toastr js plugin, that provide nice layout and pretty interesting.

We require to add one time toastr jquery code for notification, then we can manage using session. In this example you can easily understand how to implement and use.

First we will add new route for testing toastr notification like as bellow:

app/Http/routes.php

Route::get('notification', 'HomeController@notification');

Ok, now we require to add controller method, so if you haven't HomeController then create new HomeController and add code as bellow:

app/Http/Controllers/HomeController.php

namespace App\Http\Controllers;

use App\Http\Requests;
use Illuminate\Http\Request;

class HomeController extends Controller
{

    public function notification()
    {
        session()->set('success','Item created successfully.');

        return view('notification-check');
    }

	
}

Next, we require to create notification-check.blade.php file for layout so create new notification-check.blade.php file in resources directory.

resources/views/notification-check.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>Check For Notification toastr</title>
    <script src="http://demo.itsolutionstuff.com/plugin/jquery.js"></script>
    <link rel="stylesheet" href="http://demo.itsolutionstuff.com/plugin/bootstrap-3.min.css">
</head>
<body>

@include('notification')

<div class="container">
    <div class="row">
        <div class="col-md-10 col-md-offset-1">
            <div class="panel panel-default">
                <div class="panel-heading">Dashboard</div>
                <div class="panel-body">
                    Check for notification
                </div>
            </div>
        </div>
    </div>
</div>

</body>
</html>

At last we require to create notification.blade.php file for display toastr.js notification. this file we can include in our default file that way we don't require to write same code in all place.

So, first let's create notification.blade.php and put bellow code on that file.

resources/views/notification.blade.php

Read Also: Laravel 10 Notification | Create Notification in Laravel 10
<script src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.js"></script>
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.css">

<script>

  @if(Session::has('success'))
  		toastr.success("{{ Session::get('success') }}");
  @endif

  @if(Session::has('info'))
  		toastr.info("{{ Session::get('info') }}");
  @endif

  @if(Session::has('warning'))
  		toastr.warning("{{ Session::get('warning') }}");
  @endif

  @if(Session::has('error'))
  		toastr.error("{{ Session::get('error') }}");
  @endif

</script>

Output:

Now, we are ready to check, so let's check...

you can get more demo from here : Click Here.

Tags :
Previous

How to Disable Right Click Menu using JQuery?
Next

JQuery Accordion using JQuery UI Example

We are Recommending you

Popular Posts

Categories

Latest Posts

Shares