DEV Community

loading...

How To Add Toastr Notification In Laravel

websolutionstuff profile image Websolutionstuff Originally published at websolutionstuff.com ・2 min read

In this tutorial I will show you How to add Toastr Notification In Laravel Application.

There are many types of notification available to display different messages in laravel or PHP like simple pop up notification using jquery, display messages using bootstrap modal, display notification using flash message, and toastr message notification. So,let's start and add below code in your application to get output.

First you need to add bootstrap CSS, Jquery JS, toastr CSS and toastr JS in you main view blade file, I have added below CDN in tag.

<head>
    <title>Laravel Toastr Notification Example - websolutionstuff.com</title>

    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0- 
     alpha/css/bootstrap.css" rel="stylesheet">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <link rel="stylesheet" type="text/css" 
     href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
</head>
Enter fullscreen mode Exit fullscreen mode

Then after we need to add different toastr message in script tag like below.

<script>
  @if(Session::has('message'))
  toastr.options =
  {
    "closeButton" : true,
    "progressBar" : true
  }
        toastr.success("{{ session('message') }}");
  @endif

  @if(Session::has('error'))
  toastr.options =
  {
    "closeButton" : true,
    "progressBar" : true
  }
        toastr.error("{{ session('error') }}");
  @endif

  @if(Session::has('info'))
  toastr.options =
  {
    "closeButton" : true,
    "progressBar" : true
  }
        toastr.info("{{ session('info') }}");
  @endif

  @if(Session::has('warning'))
  toastr.options =
  {
    "closeButton" : true,
    "progressBar" : true
  }
        toastr.warning("{{ session('warning') }}");
  @endif
</script>
Enter fullscreen mode Exit fullscreen mode

After that we need to display messages in view file using redirect URL in controller, So we need to add some code in controller also. So copy below code in your controller.

return redirect()->route('your route name')->with('message','Data added Successfully');

return redirect()->route('your route name')->with('error','Data Deleted');

return redirect()->route('your route name')->with('Warning','Are you sure you want to delete? ');

return redirect()->route('your route name')->with('info','This is xyz information');
Enter fullscreen mode Exit fullscreen mode

So,I hope you will be successfully implement this code and display different message in your laravel applications.

Read Also : How To Add Bootstrap Modal In Laravel

Discussion (0)

pic
Editor guide