Laravel - как подтвердить метод уничтожения во всплывающем окне? - PullRequest
Новая
       22

Laravel - как подтвердить метод уничтожения во всплывающем окне?

0 голосов
/ 18 февраля 2020

У меня есть несколько форм, которые удаляют данные из моего приложения Laravel, и мне было интересно. Как лучше всего сделать это более удобным для пользователя, подтвердив удаление этих элементов?

Это код, который я сейчас использую для удаления записей в таблице (без подтверждения). 

<td class="col">
    <form action="{{ route('campaigns.destroy', $campaign->id) }}" method="POST">
        @csrf
        @method('DELETE')
        <button type="submit" class="btn btn-danger btn-sm float-right" title="Verwijderen">
            <i class="fa fa-times"></i>
        </button>
    </form>
</td>

Вот так выглядит мой метод уничтожения 

public function destroy(Campaign $campaign): RedirectResponse
{
    $campaign->delete();

    return redirect()->route('campaigns.index');
}

То, что я пробовал

У меня есть пытался использовать нативную функцию javascripts confirm(). Но это действительно ужасно, поэтому для меня это не вариант.

1 Ответ

2 голосов
/ 18 февраля 2020

Вы можете использовать sweetalert2 

<td class="col">
   <button type="button" data-url="{{ route('campaigns.destroy', $campaign->id) }}" class="btn btn-danger btn-sm float-right" title="Verwijderen">
        <i class="fa fa-times"></i>
   </button> 
</td>

JS

$(document).on('click', '.btn-danger', function (e) {
    e.preventDefault();
    var url = $(this).data('url');
    var token = "{{ csrf_token() }}";
    swal({
            title: "Are you sure!",
            type: "error",
            confirmButtonClass: "btn-danger",
            confirmButtonText: "Yes!",
            showCancelButton: true,
        },
        function() {
            $.ajax({
                type: "POST",
                url: url,
                data: {_token: token, _method: 'DELETE'},
                success: function (data) {
                     //
                }         
            });
    });
});
...