Laravel 10 Toastr Notifications Messages with Ajax

Laravel 9 Toastr Notifications Messages with Ajax call example; In this tutorial you will learn how to use and display toastr notifications messages in laravel app using Ajax. The Toastr js has different types of notifications like success, info, warning, and error.

Toastr js plugin provide us success, info, warning and error message notifications where we can add our notifications for users view. Lets follow the easy and best code for showing Toastr Notifications messages in Laravel blade file using ajax request.

Step 1: Add Route

First, you need to add a route in your routes/web.php file jsut like below.

use App\Http\Controllers\SettingController;

Route::post('settings', 'SettingController@update');

Step 2: In Controller

Next, create a controller using the artisan command:

php artisan make:controller SettingController

Next open the App/Http/Controllers/SettingController.php controller file and add code for return response in json which success or error messages you send from controller which will show in you blade file.

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

class SettingController extends Controller
{
    public function update()
    {
         #your code here 
          return response()->json(['success' => 'Setting successfully updated']);
    }
}

Step 3: In blade File

From blade file you add a onclick function where from you send the request in your controller from ajax request.

<span class="btn btn-primary" onclick="updateSetting(event.target)">Update</span>

Step 4: In js FIle

Now add below code in you js file. Here we add toastr js plugin js cdn and css cdn and add ajax request code.

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

 function updateSetting(_this) {

    toastr.options = {
          "closeButton": true,
          "newestOnTop": true,
          "positionClass": "toast-top-right"
        };

      var _url = "settings";

      $.ajax({
          url: _url,
          type: 'post',
          data: {'user_id': 1},
          success: function(res) {
            toastr.success(res.success);
          }
      })
  }

Now you can check the laravel toastr notifications using ajax call in your laravel project. I hope this work for you, if you have any issue or questions let me know in comment section. You can follow us on facebook for new updates.