-1

我想问一下如何使用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');
        });
      },
4

2 回答 2

2

您可以使用 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/下载

于 2013-08-12T12:17:42.437 回答
0

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

  $('.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();
                                 } 
    });
});
于 2013-08-13T04:37:13.863 回答