Post Detail

Laravel

Notifikasi Toastr di Laravel Menggunakan Ajax

by Asep Ependi
09 January 2021
1877 views

Selamat datang kembali di website ini, Apa kabar kalian semua semoga dalam keadaan baik - baik saja. Pembahasan kali ini mengenai cara membuat pesan notifikasi Toastr menggunakan Ajax pada Laravel. Cara ini bisa diterapkan pada project yang sedang dikerjakan atau pun buat belajar ngoding seperti saya, Untuk load Javascript dan CSS Toastr nya seperti dibawah ini

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

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

Untuk javascript nya kurang lebih seperti ini

$('#save').click(function (e) {
   e.preventDefault();

   $.ajax({
     data: $('#kategoriForm').serialize(),
     url: "{{ route('category.store') }}",
     type: "POST",
     dataType: 'json',
       success:function(data) {
         toastr.options= {
            "progressBar":true,
            "positionClass":"toast-top-right",
            "onclick":null,
            "showDuration":"300",
            "hideDuration":"1000",
            "timeOut":"3000",
            "extendedTimeOut":"1000",
            "showEasing":"swing",
            "hideEasing":"linear",
            "showMethod":"fadeIn",
            "hideMethod":"fadeOut"
         }
       toastr.success('Berhasil Menyimpan Kategori', 'Success !'),(data.success);
       $('#ajaxModel').modal('hide');
       table.draw();
     },
     error:function (err) {
        if (err.status==422) {
           console.log(err.responseJSON);
           console.warn(err.responseJSON.errors);
           $.each(err.responseJSON.errors, function (i, error) {
              var el=$(document).find('[title="'+i+'"]');
              $('#error').text(error[0]);
           });
        }
     }
  });
});

$('body').on('click', '.delete', function () {
   varid = $(this).data("id");

   if (confirm("Apakah Anda Yakin !") ===true ){
       $.ajax({
         type: "DELETE",
         url: "{{ route('category.store') }}"+'/'+id,
         success:function(res) {
           toastr.options= {
             "progressBar":true,
             "positionClass":"toast-top-right",
             "onclick":null,
             "showDuration":"300",
             "hideDuration":"1000",
             "timeOut":"3000",
             "extendedTimeOut":"1000",
             "showEasing":"swing",
             "hideEasing":"linear",
             "showMethod":"fadeIn",
             "hideMethod":"fadeOut"
           }
           toastr.error('Berhasil Menghapus Kategori', 'Success !'),(res.success);
           table.draw();
         }
      });
  } else{
    return false;
  }
});