Sweetalert удалить подтвердить Laravel

Question

У меня есть проблема в laravel для подтверждения удаления сообщения sweetalert

<script>
        !function ($) {
        "use strict";
        var SweetAlert = function () {
        };
        //examples 
        SweetAlert.prototype.init = function () {

            $('.sa-remove').click(function () {
                swal({
                    title: "are u sure?",
                    text: "lorem lorem lorem",
                    type: "error",
                    showCancelButton: true,
                    confirmButtonClass: 'btn-danger waves-effect waves-light',
                    confirmButtonText: "Delete",
                    cancelButtonText: "Cancel",
                    closeOnConfirm: true,
                    closeOnCancel: true
                },
                function(){
                    window.location.href = "{{ route('panel.posts.remove',$post->id) }}";
                });
            });
        },
        //init
        $.SweetAlert = new SweetAlert, $.SweetAlert.Constructor = SweetAlert
}(window.jQuery),

//initializing 
    function ($) {
        "use strict";
        $.SweetAlert.init()
    }(window.jQuery);
</script>    

Но у меня есть foreach в представлении, и оно простопропускает последний foreach пост id, и когда я хочу удалить, например, второе сообщение в таблице, последний удаляет!

это таблица:

             <thead>
                <tr>
                    <th>ID</th>
                    <th>Title</th>
                    <th>Body</th>
                    <th>Author</th>
                    <th>Operations</th>
                </tr>
            </thead>
            <tbody>
                @foreach($posts as $post)
                <tr>
                    <td>{{ $post->id }}</td>
                    <td>{{ $post->title }}</td>
                    <td>{{ $post->body }}</td>
                    <td>{{ $post->user->name }}</td>
                    <td>
                         <a href="#" class="sa-remove"><button class="wave-effect btn btn-danger btn-bordred wave-light"><i class="fa fa-times"></i></button></a>
                    </td> 
                </tr>
                @endforeach
            </tbody>

и я 'Я новичок в этом, конечно!

Answer 1

Если вы работаете с несколькими записями, вы можете использовать этот полностью динамический код:

<a href="{{ route('users.destroy', $entity->id) }}"
    class="confirmation"
    data-title="Delete User"
    data-text="Are you sure want to delete this user? ">
     <i class="icon-trash"></i>
</a>

Из атрибутов данных вы можете получить динамический URL-адрес и заголовок для поля Sweetalear.и затем просто передайте эту информацию в Javascript.

jQuery(document).on('click', '.confirmation', function (e) {
    e.preventDefault(); // Prevent the href from redirecting directly
    var linkURL = $(this).attr("href");
    var _title = $(this).attr("data-title");
    var _text = $(this).attr("data-text");
    warnBeforeRedirect(linkURL, _text, _title);
});

Выполните функцию, чтобы затем подтвердить и перенаправить пользователя для удаления метода:

function warnBeforeRedirect(linkURL, _text, _title) {
    swal({
        title: _title,
        text: _text,
        type: 'warning',
        showCancelButton: true,
        html: true,
    }, function () {
        var form = $('<form>', {
            'method': 'POST',
            'action': linkURL
        });

        var hiddenInput = $('<input>', {
            'name': '_method',
            'type': 'hidden',
            'value': 'DELETE'
        });

        hiddenToken = $('<input>', {
            'name': '_token',
            'type': 'hidden',
            'value': jQuery('meta[name="csrf-token"]').attr('content')
        });

        form.append(hiddenInput).append(hiddenToken).appendTo('body').submit();
    });
}

Если вы используете Laravel DELETE Route, тогда вам нужнопередать токен в скрытый.Поэтому я создал форму и добавил ее с тегом Body с некоторыми скрытыми переменными.затем просто отправьте его.

Надеюсь, это полезно для вас.Удачи.

Answer 2

Вы удаляете неправильный модальный объект. Сначала вам нужно добавить атрибут данных к кнопке ссылки

 <a href="#" data-id="{{$post->id}}" class="sa-remove"><button class="wave-effect btn btn-danger btn-bordred wave-light"><i class="fa fa-times"></i></button></a> code here

Затем в своем коде JavaScript получите значение атрибута и измените URL.

 $('.sa-remove').click(function () {
            var postId = $(this).data('id'); 
            swal({
                title: "are u sure?",
                text: "lorem lorem lorem",
                type: "error",
                showCancelButton: true,
                confirmButtonClass: 'btn-danger waves-effect waves-light',
                confirmButtonText: "Delete",
                cancelButtonText: "Cancel",
                closeOnConfirm: true,
                closeOnCancel: true
            },
            function(){
                window.location.href = "your-url/" + postId;
            }); here

Answer 3

Проблема в вашем URL, вы не динамически выбираете идентификатор модели, которую нужно удалить, потому что в вашем JavaScript на вашем URL вы только что напечатали $ post-> id, которыйэто то, что вы не должны делать, так как смешивать php и js - это плохая практика ...

Так что, чтобы решить вашу проблему, вы должны правильно установить href, либо вставить его непосредственно в атрибут href, либоне смешивая php с js, например: выбирая $ post-> id с помощью селектора JS, а не php, вы пытаетесь напечатать php на javascript динамически, что не имеет никакого смысла.PHP-код, который у вас есть внутри js, будет запускаться ONCE , поэтому он печатает последний идентификатор вместо элемента, который вы щелкнули ...

Вы должны попытаться сделатьчто-то вроде ...:

function(){
                window.location.href =  // select post id with js here;
            });

Но я хотел бы установить href для своего foreach, чтобы вы уже настроили и были готовы к публикации на нужном маршруте, чтобы это имело больше смысла

<a href="/your-delete-route/{{$post->id}}" class="sa-remove"><button class="wave-effect btn btn-danger btn-bordred wave-light"><i class="fa fa-times"></i></button></a>