Question

我正在使用SweetAlert和Symfony，我希望用户在完成删除操作之前确认。

当用户点击SweetAlert弹出的删除按钮时，发生了什么，然后立即消失，该项目被删除。

我不想删除该项目，直到用户从SweetAlert弹出窗口中单击确定。

这是我的设置。

JS：

function myFunction() {
        swal({
            title: "Are you sure?",
            text: "You will not be able to recover this Job Title!",
            type: "warning",
            showCancelButton: true,
            confirmButtonColor: "#DD6B55",
            confirmButtonText: "Yes, delete it!",
            closeOnConfirm: false,
            closeOnCancel: false
        }, function (isConfirm) {
            if (isConfirm){
                swal("Deleted!", "Job Title has been deleted.", "success");
            } else {
                swal("Cancelled", "Job Title was not deleted.", "error");
            }
        });
    };

HTML：

<a href="{{ path('setup_jobtitles_delete', {'id': jobTitle.id}) }}" onclick="myFunction()" class="btn btn-white" data-toggle="tooltip" data-toggle="tooltip" data-placement="top" title="Delete">
    <i class="fa fa-trash"></i>
</a>

如何在用户点击“确定”之前等待删除操作？

编辑：我最终使用$.post并将href移动到这样的data-：

 <a href="#" onclick="myFunction(this)" data-url="{{ path('setup_jobtitles_delete', {'id': jobTitle.id}) }}" class="btn btn-white" data-toggle="tooltip" data-toggle="tooltip" data-placement="top" title="Delete">
                                                                <i class="fa fa-trash"></i>
                                                            </a>
function myFunction(btn) {
        var url = $(btn).data('url');
        swal({
            title: "Are you sure?",
            text: "You will not be able to recover this Job Title!",
            type: "warning",
            showCancelButton: true,
            confirmButtonColor: "#DD6B55",
            confirmButtonText: "Yes, delete it!",
            closeOnConfirm: false
        }, function () {
             $.post(url, function(){
                swal("Deleted!", "Job Title has been deleted.", "success");
                $(btn).parents('tr').remove();
             });
        });
    };

Answer 1

您可以执行以下操作：

<a href="/delete/me" class="confirm" data-title="Want to delete this?" data-type="warning">Click me</a>

<a href="/edit/me" class="confirm" data-title="Info image" data-type="info">Click me</a>

和JS部分，需要加载jquery

$(function() {
    $('a.confirm').click(function (e) {
            e.preventDefault();
            var tthis = $(this);
            swal({
                title: "Are you sure?",
                text: $(this).data('title'),
                type: $(this).data('type'),
                showCancelButton: true,
                confirmButtonText: "Yes",
                cancelButtonText: "No",
            }, function (isConfirm) {
                if (isConfirm) {
                    document.location.href = tthis.attr('href');
                }
            });
        });
});

要等待用户确认，您必须取消e.preventDefault();

的链接操作

然后在用户确认后手动转到链接。

Answer 2

您可以像这样在控制器中设置警报。

public function index()    //normal index
{
    return view('hello.index');
}

public function index_alert($message)    //index with alert
{   
    return redirect()->route('hello.index')->with('success', $message);;
}

并将您的ajax / javascript设置为“警报”路线。

$.ajax({
  ...
  success:function(data){   
    window.location.href = "index/alert/"+data.message;
  }
});

并在web.php中添加此路由

Route::get('index/alert/{message}', 'YourController@index_alert');

Answer 3

更简单的解决方案是直接在onclick添加函数，如下所示：

<a href="{{ path('setup_jobtitles_delete', {'id': jobTitle.id}) }}"
    onclick="return confirm('are u sure?')" class="btn btn-white"
    data-toggle="tooltip" data-toggle="tooltip" data-placement="top" title="Delete">
    <i class="fa fa-trash"></i>
</a>

我使用它，如果你点击确定它只会去路线。这很简单 - ＆gt;保持代码简单。

编辑＃2

如果你改变你的功能怎么办：

function myFunction() {
    swal({
        title: "Are you sure?",
        text: "You will not be able to recover this Job Title!",
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: "#DD6B55",
        confirmButtonText: "Yes, delete it!",
        closeOnConfirm: false
    }, function () {
        swal("Deleted!", "Job Title has been deleted.", "success");
    });
};

有什么不同吗？

Sweet Alert不等待用户点击确定

3 个答案: