在用户确认之前提交带有确认的Jquery模式

时间:2015-10-30 12:06:18

标签: javascript jquery ajax

我让用户使用jquery和ajax删除函数。当用户点击Delete弹出窗口出现时,询问他是否确定按钮YesNo。问题是执行脚本并在单击Delete时删除用户。用户点击No

并不重要

我使用这个jquery确认插件: https://myclabs.github.io/jquery.confirm/

这是jquery部分

$(document).ready(function() {

    $('.delete').click(function() {
      var parent = $(this).closest('.header-profile');
      $.ajax({
         type: 'get',
         url: 'misc/friendRemove.php', 
         data: 'ajax=1&delete=' + $(this).attr('id'),
         beforeSend: function() {
            parent.animate({'backgroundColor':'#fb6c6c'},300);
         },

             success: function()
             {
                parent.fadeOut('slow', function() {$(this).remove();});
             }
      });                 
    });

    $('.delete').confirm({
       text: "Are you sure?",
       title: "Please confirm",

       confirmButton: "Yes",
       cancelButton: "No",
       post: true,
       confirmButtonClass: "btn-danger",
       cancelButtonClass: "btn-default",
       dialogClass: "modal-dialog modal-lg"
    });      
});

按钮

<a href="" class="delete" id="'.$row['id'].'"><i class="fa fa-times pull-right"></i></a>

2 个答案:

答案 0 :(得分:1)

尝试使用:

$(document).ready(function() {

    $('.delete').click(function() {

        $(this).confirm({
            text: "Are you sure?",
            title: "Please confirm",

            confirm: function() {
                var parent = $(this).closest('.header-profile');
                $.ajax({
                    type: 'get',
                    url: 'misc/friendRemove.php',
                    data: 'ajax=1&delete=' + $(this).attr('id'),
                    beforeSend: function() {
                        parent.animate({'backgroundColor':'#fb6c6c'},300);
                    },

                    success: function()
                    {
                        parent.fadeOut('slow', function() {$(this).remove();});
                    }
                });
            },

            confirmButton: "Yes",
            cancelButton: "No",
            post: true,
            confirmButtonClass: "btn-danger",
            cancelButtonClass: "btn-default",
            dialogClass: "modal-dialog modal-lg"
        });

    });

});

也就是说,只有在收到来自插件文档的确认时才调用ajax进行用户删除:https://github.com/myclabs/jquery.confirm#options

答案 1 :(得分:1)

您必须在confirm方法上调用ajax delete方法。以下是代码:

function deleteItem(parent, id){
            $.ajax({
             type: 'get',
             url: 'misc/friendRemove.php', 
             data: 'ajax=1&delete=' + id,
             beforeSend: function() {
                parent.animate({'backgroundColor':'#fb6c6c'},300);
             },

             success: function() {
                 parent.fadeOut('slow', function( {$(this).remove();});
             }
          });         
        }

    $(document).ready(function() {
        var parent, id;
        $('.delete').click(function(event) {
          parent = $(this).closest('.header-profile');
          id = $(this).attr('id');
          event.preventDefault();        
        });


        $('.delete').confirm({
           text: "Are you sure?",
           title: "Please confirm",
           confirmButton: "Yes",
           cancelButton: "No",
           post: true,
           confirmButtonClass: "btn-danger",
           cancelButtonClass: "btn-default",
           dialogClass: "modal-dialog modal-lg",
            confirm: function(button) {
            deleteItem(parent, id);
            }
        });      
    });