如何添加 Jquery 确认模式

Question

我试图使用 jquery 从数据库中删除数据，以下脚本帮助我做到了这一点。现在我想在最终删除它之前显示一个 jquery 确认模式（是：否）。我浏览了一些教程来学习如何做到这一点，但我无法让这些为我工作，

请告诉我如何添加确认模式。

谢谢

<script>

 $(function(){ // added
             $('a.delete').click(function(){
                var a_href = $(this).attr('href'); 
     $.ajax({

     type: "POST",
     url: "<?php echo base_url(); ?>batchlist/delete",
     data: "id="+a_href,
     success: function(server_response){

               if(server_response == '1')
                            { alert('MSG');}  else {$("#trid_"+a_href).hide('slow'); }

                                    }               

   });  //$.ajax ends here

                return false
    });//.click function ends here
  }); // function ends here         


 </script                                   

这是我的删除锚点

<a href="<?php echo $row['studentid']; ?>" title="Delete" class="delete" ><img src="<?php echo base_url(); ?>support/images/icons/cross.png" alt="Delete" /></a>            

Answer 1

你不需要 jQuery 来做到这一点。 Javascript 会很可爱地做到这一点：

if (confirm("Are you sure you want to contiune with this request?")) {
     //Do stuff
}

简单:)

Answer 2

最简单的方法是使用基本的 javascript。

在 ajax 调用之前，将其放入

if(!confirm('Are you sure you want to delete this?') {
    return false;
}

So 如果他们拒绝，ajax 就不会打扰。

Answer 3

我发现使用 jquery 小部件进行模式对话框并处理删除/取消按钮很方便。

(function ($) {
        $.widget('my.confirmDialog', {
            options: {
                url: null,
                elements: null,
                postParamName: 'id',
                afterDelete: null
            },
            _create: function () {
                var that = this;
                var options = that.options;
                that.element.dialog({
                    resizable: false,
                    autoOpen: false,
                    modal: true,
                    buttons: {
                        "Delete": function (e, ui) {
                            $(this).dialog("close");
                            $.post(options.url, that.postData, function (resp) {
                                that._trigger('afterDelete', e, resp);
                            });
                        },
                        "Cancel": function () {
                            $(this).dialog("close");
                        }
                    }
                });
                options.elements.live('click', function (event, ui) {
                    that.askConfirmation(this);
                });
            },
            askConfirmation: function (askElem) {
                var that = this;

                var confirmationText = $(askElem).attr("data-confirmation");
                that.element.text(confirmationText);

                var postData = {};
                postData[that.options.postParamName] = $(askElem).attr("data-value");
                that.postData = postData;

                that.element.dialog("open");
            },
            destroy: function () {
                this.element.dialog("destroy");
                $.Widget.prototype.destroy.apply(this, arguments);
            }

        });

    } (jQuery));

用法非常简单，您只需创建用于确认对话框的 div：

<div title="Delete confirmation" id="sampleDeleteConfirmation"
    style="display: none;">
</div>

并将小部件应用于此 div，传递应触发确认对话框的元素显示：

    $(document).ready(function () {

        $("#sampleDeleteConfirmation").confirmDialog({
            url: '/DeleteUrl',
            postParamName: 'canChangeThisIfNeeded',
            elements: $(".confirmThis"),
            afterDelete: function (event, response) {
                //callback after delete
            }
        });

    });

也是为了方便起见，我在显示模式对话框的按钮上使用数据属性来修改文本并传递值对于帖子删除操作。

          <button type="button" class="confirmThis" data-value="123" data-confirmation="Delete item 123?">
                Delete
           </button>
          <button type="button" class="confirmThis" data-value="567" data-confirmation="Delete item 567?">
                Delete
           </button>

仅此而已）