Question

我试图使用jquery从数据库中删除数据，以下脚本帮助我这样做。现在我想在最终删除之前显示一个jquery确认模式（YES：NO）。我经历了一些教程，学习如何做到这一点，但我不能让那些工作给我

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

谢谢

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

因此，如果它们下降，它就不会打扰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>

并将widget应用于此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>

并且那就是全部）

如何添加Jquery确认模式

3 个答案: