How to Add Toastr Notification in Laravel 11 Example

Websolutionstuff | Apr-24-2024 | Categories : Laravel

Hello developer! In this guide, we'll see how to add toastr notification in laravel 11. Here, we'll display toastr notifications using cdn jQuery. toastr is a Javascript library for non-blocking notifications.

You can display toastr notifications like success, info, warning, and error toastr notifications. Additionally, you can customize it as per your requirements.

Laravel 11 Toastr Notification Example

Add the below code to html file in <head> tag.

<head>
    <title>How to Add Toastr Notification in Laravel 11 Example - Websolutionstuff</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" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css"/>

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

After that, we will add different toastr messages in the script tag.

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

 

 

Example:

In this example, we will add toastr notification options like the below code example.

toastr.options = {
	"closeButton": true,
	"debug": false,
	"newestOnTop": false,
	"progressBar": true,
	"positionClass": "toast-top-right",
	"preventDuplicates": false,
	"onclick": null,
	"showDuration": "300",
	"hideDuration": "1000",
	"timeOut": "5000",
	"extendedTimeOut": "1000",
	"showEasing": "swing",
	"hideEasing": "linear",
	"showMethod": "fadeIn",
	"hideMethod": "fadeOut"
  }

 

Other Options:

Also, you can remove toastr notifications immediately and clear current toastr notifications using the below code example.

// Display a warning toast, with no title
toastr.warning('My name is Inigo Montoya. You killed my father, prepare to die!');

// Display a success toast, with a title
toastr.success('Have fun storming the castle!', 'Miracle Max Says');

// Display an error toast, with a title
toastr.error('I do not think that word means what you think it means.', 'Inconceivable!');

// Immediately remove current toasts without using animation
toastr.remove();

// Remove current toasts using animation
toastr.clear();

// Override global options
toastr.success('We do have the Kapua suite available.', 'Turtle Bay Resort', {timeOut: 5000});

 

Output:

laravel 11 toastr notification example

 


You might also like:

Recommended Post
Featured Post
How to Filter Datatable using Dropdown in Laravel 10
How to Filter Datatable using...

Hello developers! 👋 Ever found yourself dealing with a DataTable in Laravel and wished for a nifty way to filter th...

Read More

Feb-07-2024

How To Validate Phone Number In Laravel 10
How To Validate Phone Number I...

In this article, we will see how to validate phone numbers in laravel 10. Here, we will learn about mobile number v...

Read More

May-10-2023

How to Create Apexcharts Pie Chart in Laravel 11
How to Create Apexcharts Pie C...

Hello developers! In this article, we'll see how to create apexcharts pie chart in laravel 11. ApexCharts...

Read More

Apr-19-2024

How To Increase Session Lifetime In Laravel
How To Increase Session Lifeti...

In this article, we will see how to increase session timeout in laravel. In this example, we can see how to se...

Read More

Jun-28-2020