Question

我想询问如何使用jQuery创建一个用于删除记录的对话框确认框。我试图在谷歌搜索，但我不太了解，因为我是这个领域的新手。此外，我已经实现了Javascript警报，但技术要求是使用jQuery对话框而不是本机Javascript警报。请帮忙。提前致谢。任何具有分步指南的参考链接也将受到赞赏。非常感谢。

以下是我当前需要更新的代码。

$('.delete').click(function () {
  var pKey = $(this).parent().siblings()[0].innerText;
  //Get the Id of the record to delete
  var record_id = $(this).attr("id");
  //Get the GridView Row reference
  var tr_id = $(this).parents("#.record");
  // Ask user's confirmation before delete records
  if (confirm("Are you sure you want to delete this record?")) {
    $.ajax({
      type: "POST",
      url: '../SampleOnly.asmx/Delete',
      contentType: "application/json; charset=utf-8",
      dataType: "json",
      //Pass the selected record id
      data: "{ 'Id':'" + pKey + "'}",
      success: function (data) {
        // Change the back color of the Row before deleting
        tr_id.css("background-color", "blue");
        Do some animation effect
        tr_id.fadeOut(500, function () {
          //Remove GridView row
          tr_id.remove();
          alert(' The record has been deleted successfully');
        });
      },

Answer 1

您可以使用Jquery UI对话框显示确认框

$('<div id="dvConfirmModal"></div>').appendTo('body')
.html('<div><h2>Are you sure you want to delete this record?</h2></div>')
.dialog({
    modal: true,
    title: 'Delete record',
    zIndex: 10000,
    autoOpen: true,
    width: 'auto',
    resizable: false,
    draggable: false,
    buttons: {
        Ok: function() {
            //Your ajax code goes here
            $(this).dialog("close");
        },
        Cancel: function() {
            $(this).dialog("close");
        }
    },
    close: function(event, ui) {
        $(this).remove();
    }
});

将此代码与$（'。delete'）按钮单击事件一起使用。在使用此代码之前，您必须添加Jquery UI的引用。可以从http://jqueryui.com/

下载

Answer 2

我很高兴我得到了正确的答案。也许像我这样的人可能会将此作为参考。见下面的代码。谢谢！

  $('.delete').click(function () {
 var pKey = $(this).parent().siblings()[0].innerText; 
 var record_id = $(this).attr("id");               
 var tr_id = $(this).parents(".record");     

$('<div id="dvConfirmModal"></div>').appendTo('body')
.html('<p>These item will be permanently deleted and cannot be recovered. Please confirm by clicking the OK button.</p>')
.dialog({
    modal: true,
    title: 'Delete selected item?',
    zIndex: 500,
    autoOpen: true,
    width: 'auto',
    resizable: false,
    draggable: false,
    buttons: {            
      Ok: function() {
                    $.ajax({
                           type: "POST",
                            url: '../SampleOnly.asmx/Delete',       
                            contentType: "application/json; charset=utf-8",
                            dataType: "json",
                            data: "{ 'Id':'" + pKey + "'}",        

                               success: function (data) {
                                tr_id.css("background-color", "red");
                                tr_id.fadeOut(500, function (){
                                tr_id.remove();
                                alert(' The record has been deleted successfully');
                                                            });
                                error: function (err) {
                                alert('Error encountered while processing your request. Try again later.');
                                                      }   
                                }                                 
                                });                                        
                $(this).dialog("close");
                      },  
      Cancel: function() {
                 $(this).dialog("close");
                         }
                      },
      close: function(event, ui) {
               $(this).remove();
                                 } 
    });
});

如何使用jQuery编写对话框确认框？

2 个答案: