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="#" 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 2

问题出在您的网址中，您没有动态选择需要删除的模型的 id，这是因为在您的 url 上的 javascript 中，您刚刚打印了 $post->id，这是你不应该做的事情，因为像这样混合 php 和 js 是不好的做法......

因此，为了解决您的问题，您应该正确设置您的 href，或者直接将其插入您的 href 属性，或者不将 php 与 js 混合，例如：使用 JS 选择器而不是 php 选择 $post->id，您正在尝试以动态方式将 php 打印到 javascript 上，这没有任何意义。您在 js 中的 php 代码将运行 ONCE 这就是为什么它会打印 last id 而不是您单击的元素...

你应该尝试做类似...的事情：

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

但我要做的是在你的 foreach 上设置 href，这样你就已经设置好并准备发布到你需要的路线，这样会更有意义

<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>

Answer 3

如果您处理多条记录，您可以使用这个完全动态的代码：

<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>

从数据属性中，您可以获取 sweetalear 框的动态 url 和标题。然后将这些信息传递给 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，那么您还需要将令牌传递给 hidden。所以我创建了表单并将其附加到带有一些隐藏变量的 Body 标签。然后提交即可。

希望对您有所帮助。祝你好运。