Javascript SweetAlert 确认 Ajax 请求

SweetAlert confirm with Ajax request

提问by lingo

I'm new at Javascript - coding it actually for the first time. I'm trying to do a button with delete confirmation with SweetAlert. Nothing happens when I press the button with onclick="confirmDelete()". This code may be just crab, but here it is:

我是 Javascript 的新手 - 实际上是第一次编码。我正在尝试使用SweetAlert做一个带有删除确认的按钮。当我按下按钮时没有任何反应onclick="confirmDelete()"。这段代码可能只是螃蟹，但它是：

<script type="text/javascript">
    function confirmDelete() {
        swal({
            title: "Are you sure?",
            text: "You will not be able to recover this imaginary file!",
            type: "warning",
            showCancelButton: true,
            confirmButtonColor: "#DD6B55",
            confirmButtonText: "Yes, delete it!",
            closeOnConfirm: false
        )},
            $.ajax({
                url: "scriptDelete.php",
                type: "POST",
                data: {id: 5},
                dataType: "html",
                success: function () {
                    swal("Done!","It was succesfully deleted!","success");
                }
            });
    }
</script>

<a href="#" onclick="confirmDelete()">Delete</a>

Can I add any alert if deleting fails?

如果删除失败，我可以添加任何警报吗？

回答by Dhiraj

If I understand your question correctly, you are asking how to handle error condition in ajax request. Ajax settings has an error attribute and it can be used like this

如果我正确理解您的问题，您是在询问如何处理 ajax 请求中的错误条件。Ajax 设置有一个错误属性，可以这样使用

$.ajax({
  .... other settings you already have
  error: function (xhr, ajaxOptions, thrownError) {
    swal("Error deleting!", "Please try again", "error");
  }
});

Also, you are invoking swal in a wrong way. Swal has a callback like this

此外，您以错误的方式调用 swal。Swal 有一个这样的回调

swal({settings}, function(isConfirm){});

Overall code would look something like this

整体代码看起来像这样

function confirmDelete() {
    swal({
        title: "Are you sure?",
        text: "You will not be able to recover this imaginary file!",
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: "#DD6B55",
        confirmButtonText: "Yes, delete it!",
        closeOnConfirm: false
    }, function (isConfirm) {
        if (!isConfirm) return;
        $.ajax({
            url: "scriptDelete.php",
            type: "POST",
            data: {
                id: 5
            },
            dataType: "html",
            success: function () {
                swal("Done!", "It was succesfully deleted!", "success");
            },
            error: function (xhr, ajaxOptions, thrownError) {
                swal("Error deleting!", "Please try again", "error");
            }
        });
    });
}

Here is a demo http://jsfiddle.net/dhirajbodicherla/xe096w10/33/

这是一个演示http://jsfiddle.net/dhirajbodicherla/xe096w10/33/

回答by Faisal

Try This Code.It's Working fine for me.

试试这个代码。它对我来说很好用。

$('.delete-confirm').on('click', function() {
    var postID = $(this).val();
    console.log(postID);
    swal({
        title: "Are you sure?",
        text: "If you delete this post all associated comments also deleted permanently.",
        type: "warning",
        showCancelButton: true,
        closeOnConfirm: false,
        showLoaderOnConfirm: true,
        confirmButtonClass: "btn-danger",
        confirmButtonText: "Yes, delete it!",
    }, function() {
        setTimeout(function() {
            $.post("delete.php", {
                    id: postID
                },
                function(data, status) {
                    swal({
                            title: "Deleted!",
                            text: "Your post has been deleted.",
                            type: "success"
                        },
                        function() {
                            location.reload();
                        }
                    );
                }
            );

        }, 50);
    });
});

回答by Bhavin Solanki

You have doing mistake in swal({)}it should be swal({})

你做错了swal({)}应该是swal({})

Updated code :

更新代码：

<script type="text/javascript">
    function confirmDelete() {
        swal({
            title: "Are you sure?",
            text: "You will not be able to recover this imaginary file!",
            type: "warning",
            showCancelButton: true,
            confirmButtonColor: "#DD6B55",
            confirmButtonText: "Yes, delete it!",
            closeOnConfirm: false
        },
         function(isConfirm){
           if (isConfirm) {
            $.ajax({
                url: "scriptDelete.php",
                type: "POST",
                data: {id: 5},
                dataType: "html",
                success: function () {
                    swal("Done!","It was succesfully deleted!","success");
                }
            });
          }else{
                swal("Cancelled", "Your imaginary file is safe :)", "error");
          } 
       })
    }
</script>

回答by Kevin

I finally got this to work for that one dude 3 years from now.

3 年后，我终于让这个为那个家伙工作了。

function dropConfig(config_index){

  swal({
   title: "WARNING:", 
   text: "Are you sure you want to delete this connection?", 
   type: "warning",
   inputType: "submit",
   showCancelButton: true,
   closeOnConfirm: true,
   timer: 2000
       }, //end swal   }


function(isConfirm) {
      if (isConfirm == true) {

         //do the ajax stuff.
         $.ajax({
            method: "POST",
            url: "/drop_config",
            data: {"curr_config":  $("#curr_conf_conn_name_" + config_index).val()}})
           .success(function(msg) {
           show_notification(msg,"success");
           setInterval(function() {.reload();
           }, 2500);})
           .error(function(msg) {show_notification(msg.responseText,"danger");});




      } // end if }
   }); //  end function } & end swal )
}     //   end function }