Function Global Sweet Alert Pada Laravel

Pada kesempatan ini saya akan membagikan sebuah tulisan mengenai cara menggunakan sweet alert pada laravel sebagai function global, sehingga kita tidak perlu mendeklarasikan satu persatu disetiap action pada setiap function delete yang akan digunakan 

Pertama kita buat terlebih dahulu untuk javascriptnya, disini saya menggunakan blade template pada laravel dan saya simpan di script.blade.php untuk javascriptnya

$(document).on('submit', '.js-confirm', function(e){
            e.preventDefault();
            let message = $(this).data('confirm');
            let url = $(this).attr('action');
            let rowId = url.substring(url.lastIndexOf('/') + 1);
            swal({
                title: 'Apakah anda yakin?',
                text: message,
                type: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#4fa7f3',
                cancelButtonColor: '#d57171',
                confirmButtonText: 'Ya, hapus!'
            }).then(function () {
                $.ajax({
                    type:'POST',
                    url: url,
                    data: {
                        _method: 'DELETE'
                    },
                    headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}
                });
                swal(
                    'Terhapus!',
                    'Data telah di hapus !',
                    'success'
                );
                $('#'+rowId).remove();
            });
        });

Dan jangan lupa load untuk script dan css sweet alertnya, seperti dibawah ini.

<script src="{{ asset('assets/plugins/sweet-alert2/sweetalert2.min.js') }}"></script>
<link rel="stylesheet" href="{{ asset('assets/plugins/sweet-alert2/sweetalert2.min.css') }}">

Untuk bagian disetiap controller nya

if ($request->ajax()) {
                $simpananWajib = SimpananWajib::with('member')->select();
                return DataTables::of($simpananWajib)
                    ->addColumn('action', function ($simpananWajib) {
                        return view('datatable.action', [
                            'model' => $simpananWajib,
                            'form_url' => route('simpanan-wajib.destroy', $simpananWajib->id),
                            'edit_url' => route('simpanan-wajib.edit', $simpananWajib->id),
                            'can_edit' => 'edit-simpanan-wajib',
                            'can_delete' => 'delete-simpanan-wajib',
                            'confirm_message' => 'Anda akan menghapus Simpanan Wajib'
                        ]);
                    })

                    ->editColumn('saldo_awal', function ($simpananWajib) {
                        return rupiah($simpananWajib->saldo_awal);
                    })

                    ->setRowId(function ($simpananWajib) {
                        return $simpananWajib->id;
                    })

                    ->make(true);
            }

Sebenarnya kita hanya menambahkan function dibawah ini, seperti halnya yang diatas

->setRowId(function ($simpananWajib) {
    return $simpananWajib->id;
 })

Dan pada Controller diatas saya menggunakan return view ('datatable.action), dan tambahkan class js-confirm pada function tersebut, sesuai dengan javascript yang pertama kita buat diatas 

{!! Form::model($model, ['url' => $form_url, 'method' => 'delete', 'class' => 'form-inline js-confirm', 'data-confirm' => $confirm_message]) !!}

Dan bagian terakhir pada function delete nya

public function destroy(SimpananWajib $simpananWajib)
    {
        if (\Auth::user()->can('delete-simpanan-wajib')) {
            $simpananWajib->delete();
        } else {
            return redirect()->back()->with('error', __('Permission denied.'));
        }
    }

Selesai, semoga bisa dipahami dengan penjelasan diatas ^_^

Kurang lebih seperti ini hasilnya

delete_1

Related Articles

Comments